Web APIs

本篇學習目標:

能夠說出常見 offset 系列屬性的作用

能夠說出常見 client 系列屬性的作用

能夠說出常見 scroll 系列屬性的作用

能夠封裝簡單動畫函數

1.1. 元素偏移量 offset 系列

1.1.1 offset 概述

offset 翻譯過來就是偏移量，我們使用 offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。

獲得元素距離帶有定位父元素的位置
獲得元素自身的大小（寬度高度）
注意：返回的數值都不帶單位

1.1.2 offset 與 style 區別

offset

offset 可以得到任意樣式表中的樣式值
offset 系列獲得的數值是沒有單位的
offsetWidth 包含padding+border+width
offsetWidth 等屬性是只讀屬性，只能獲取不能賦值
所以，我們想要獲取元素大小位置，用offset更合適

style

style 只能得到行內樣式表中的樣式值
style.width 獲得的是帶有單位的字符串
style.width 獲得不包含padding和border 的值
style.width 是可讀寫屬性，可以獲取也可以賦值
所以，我們想要給元素更改值，則需要用style改變

1.1.3 案例：獲取鼠標在盒子內的坐標

我們在盒子內點擊，想要得到鼠標距離盒子左右的距離。
首先得到鼠標在頁面中的坐標（e.pageX, e.pageY）
其次得到盒子在頁面中的距離 ( box.offsetLeft, box.offsetTop)
用鼠標距離頁面的坐標減去盒子在頁面中的距離，得到鼠標在盒子內的坐標
如果想要移動一下鼠標，就要獲取最新的坐標，使用鼠標移動

var box = document.querySelector('.box');
box.addEventListener('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerHTML = 'x坐標是' + x + ' y坐標是' + y;
})

1.1.4 案例：盒子拖拽

1.1.5. 案例分析:

 <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.box {position: absolute;left: 100px;top: 100px;width: 200px;height: 200px;background-color: green;}</style>
</head><body><div class="box"></div><script>/*1) 鼠標在盒子上按下2）鼠標在文檔中移動3）盒子跟著鼠標拖動4）松開鼠標，盒子停止移動*/var box = document.querySelector('.box')// 為box添加mousedown事件，在這個事件中，首先獲取鼠標在盒子中的坐標box.addEventListener('mousedown', function (e) {// 分別獲取鼠標按下時在盒子中的坐標var mouse_x = e.pageX - this.offsetLeftvar mouse_y = e.pageY - this.offsetTop// 鼠標按下之后為文檔添加鼠標移動事件document.addEventListener('mousemove', moveBox)function moveBox(e) {// 不斷獲取盒子距離頁面左側和頂部的距離var box_left = e.pageX - mouse_xvar box_top = e.pageY - mouse_ybox.style.left = box_left + 'px'box.style.top = box_top + 'px'}// 為盒子添加鼠標松開事件，在此事件中為document移除mousemove事件box.addEventListener('mouseup', function () {document.removeEventListener('mousemove', moveBox)})})</script>
</body></html>

1.1.6 案例：仿京東放大鏡

整個案例可以分為三個功能模塊
鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
黃色的遮擋層跟隨鼠標功能。
移動黃色遮擋層，大圖片跟隨移動功能。

1.1.7. 案例分析:

黃色的遮擋層跟隨鼠標功能。
把鼠標坐標給遮擋層不合適。因為遮擋層坐標以父盒子為準。
首先是獲得鼠標在盒子的坐標。
之后把數值給遮擋層做為left 和top值。
此時用到鼠標移動事件，但是還是在小圖片盒子內移動。
發現，遮擋層位置不對，需要再減去盒子自身高度和寬度的一半。
遮擋層不能超出小圖片盒子范圍。
如果小于零，就把坐標設置為0
如果大于遮擋層最大的移動距離，就把坐標設置為最大的移動距離
遮擋層的最大移動距離：小圖片盒子寬度減去遮擋層盒子寬度

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}.small_box {position: relative;width: 450px;height: 450px;border: 1px solid #ccc;margin: 10px 0 0 10px;float: left;}.mask {display: none;position: absolute;left: 0;bottom: 0;width: 300px;height: 300px;background-color: rgba(255, 0, 0, .2);}.small_box:hover {border-right: none;}.big_box {display: none;position: relative;width: 500px;height: 500px;border: 1px solid #ccc;float: left;margin-top: 10px;overflow: hidden;}.big_img {position: absolute;}</style>
</head><body><div class="small_box"><img src="./images/small.jpg" alt=""><!--遮罩層--><div class="mask"></div></div><div class="big_box"><img src="./images/big.jpg" class="big_img" alt=""></div><script>var small_box = document.querySelector('.small_box')var big_box = document.querySelector('.big_box')var big_img = document.querySelector('.big_img')var mask = document.querySelector('.mask')// 為small_box添加mouseover 事件，在事件中讓遮罩層和大盒子顯示small_box.addEventListener('mouseover', function () {mask.style.display = 'block'big_box.style.display = 'block'})// 為small_box添加 mouseout 事件，在事件中讓遮罩層和大盒子隱藏small_box.addEventListener('mouseout', function () {mask.style.display = 'none'big_box.style.display = 'none'})/* 為small_box 添加 mousemove 事件，在事件中，1）讓遮罩層隨著鼠標移動*/small_box.addEventListener('mousemove', function (e) {// 獲取鼠標在盒子中的坐標var mouse_x = e.pageX - this.offsetLeftvar mouse_y = e.pageY - this.offsetTop// 設置遮罩層的left和top(遮罩層的移動距離)var mask_left = mouse_x - mask.offsetWidth / 2var mask_top = mouse_y - mask.offsetHeight / 2// 計算遮罩層的最大移動距離var mask_left_max = this.offsetWidth - mask.offsetWidthvar mask_top_max = this.offsetHeight - mask.offsetHeightif (mask_left <= 0) {mask_left = 0}if (mask_left >= mask_left_max) {mask_left = mask_left_max}if (mask_top <= 0) {mask_top = 0}if (mask_top >= mask_top_max) {mask_top = mask_top_max}mask.style.left = mask_left + 'px'mask.style.top = mask_top + 'px'/*移動大圖片大圖片移動距離=遮罩層移動距離*大圖片的最大移動距離/遮罩層最大移動距離*/var big_img__left_max = big_box.offsetWidth - big_img.offsetWidthvar big_img_top_max = big_box.offsetHeight - big_img.offsetHeight// 計算大圖片的移動距離big_img.style.left = mask_left * big_img__left_max / mask_left_max + 'px'big_img.style.top = mask_top * big_img_top_max / mask_top_max + 'px'})</script>
</body></html>

1.2. 元素可視區 client 系列

1.2.1 client概述

client 翻譯過來就是客戶端，我們使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過 client
系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。

在這里插入圖片描述

1.2.2. 淘寶 flexible.js 源碼分析

立即執行函數 (function(){})() 或者 (function(){}())

主要作用：創建一個獨立的作用域。避免了命名沖突問題

下面三種情況都會刷新頁面都會觸發 load 事件。

1.a標簽的超鏈接

2.F5或者刷新按鈕（強制刷新）

3.前進后退按鈕

但是火狐中，有個特點，有個“往返緩存”，這個緩存中不僅保存著頁面數據，還保存了DOM和JavaScript的狀態；實際上是將整個頁面都保存在了內存里。

所以此時后退按鈕不能刷新頁面。

此時可以使用 pageshow事件來觸發。，這個事件在頁面顯示時觸發，無論頁面是否來自緩存。在重新加載頁面中，pageshow會在load事件觸發后觸發；根據事件對象中的persisted來判斷是否是緩存中的頁面觸發的pageshow事件

注意這個事件給window添加。

1.3.元素滾動 scroll 系列

1.3.1. scroll 概述

scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等。

在這里插入圖片描述

1.3.2. 頁面被卷去的頭部

如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱為頁面被卷去的頭部。滾動條在滾動時會觸發 onscroll事件。

1.3.3.案例：仿淘寶固定右側側邊欄

原先側邊欄是絕對定位
當頁面滾動到一定位置，側邊欄改為固定定位
頁面繼續滾動，會讓返回頂部顯示出來

1.3.4.案例分析:

需要用到頁面滾動事件 scroll 因為是頁面滾動，所以事件源是document
滾動到某個位置，就是判斷頁面被卷去的上部值。
頁面被卷去的頭部：可以通過window.pageYOffset 獲得如果是被卷去的左側window.pageXOffset
注意，元素被卷去的頭部是element.scrollTop , 如果是頁面被卷去的頭部則是 window.pageYOffset
其實這個值可以通過盒子的 offsetTop可以得到，如果大于等于這個值，就可以讓盒子固定定位了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.w {width: 1000px;margin: auto;}.header {height: 150px;background-color: #000;margin-bottom: 10px;}.main {height: 2000px;background-color: blue;margin-bottom: 10px;}.footer {height: 100px;background-color: #000;}nav {position: absolute;right: 2px;top: 300px;width: 50px;height: 200px;background-color: #ccc;}</style>
</head><body><div class="header w"></div><div class="main w"></div><div class="footer w"></div><nav><span>返回頂部</span></nav><script>var main = document.querySelector('.main')var nav = document.querySelector('nav')// 獲取固定導航距離頂部的距離var navTop = nav.offsetTop// 獲取main元素距離頁面頂部的距離var mainTop = main.offsetTop// 計算導航變成固定定位后，距離頂部的距離document.addEventListener('scroll', function () {if (window.pageYOffset >= main.offsetTop) {nav.style.position = 'fixed'nav.style.top = navTop- mainTop  + 'px'}else{nav.style.position = 'absolute'nav.style.top ='300px'}})</script>
</body></html>

1.3.5.頁面被卷去的頭部兼容性解決方案

需要注意的是，頁面被卷去的頭部，有兼容性問題，因此被卷去的頭部通常有如下幾種寫法：

聲明了 DTD，使用 document.documentElement.scrollTop
未聲明 DTD，使用 document.body.scrollTop
新方法 window.pageYOffset和 window.pageXOffset，IE9 開始支持

function getScroll() {return {left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0};} 
使用的時候  getScroll().left

1.4. 三大系列總結

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;background-color: #fff;border: 10px solid #000;margin-top: 100px;/* overflow: scroll; */}</style>
</head><body><div class="box"><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p><p>什么時候開學啊</p></div><script>var box = document.querySelector('.box')// 元素的上邊框距離具有定位的父元素的上邊框的距離console.log(box.offsetTop)// 元素的上邊框的大小console.log(box.clientTop)// 元素被卷去的距離console.log(box.scrollTop)// 測試scrollTop// box.addEventListener('scroll',function(){//     console.log(box.scrollTop)// })console.log('-----------------')// 獲取的時元素的高度：width+padding+borderconsole.log(box.offsetHeight)// 獲取元素的高度，width+padding（只獲取元素的可視區域的高度）console.log(box.clientHeight)// 獲取元素的高度，width+padding（只獲取元素的實際的高度）console.log(box.scrollHeight)</script>
</body></html>

在這里插入圖片描述

他們主要用法：

1.offset系列經常用于獲得元素位置 offsetLeft offsetTop

2.client經常用于獲取元素大小 clientWidth clientHeight

3.scroll 經常用于獲取滾動距離 scrollTop scrollLeft

4.注意頁面滾動的距離通過 window.pageXOffset 獲得

1.5. mouseenter 和mouseover的區別

當鼠標移動到元素上時就會觸發mouseenter 事件
類似 mouseover，它們兩者之間的差別是
mouseover 鼠標經過自身盒子會觸發，經過子盒子還會觸發。mouseenter 只會經過自身盒子觸發
之所以這樣，就是因為mouseenter不會冒泡
跟mouseenter搭配鼠標離開 mouseleave 同樣不會冒泡

1.6. 動畫函數封裝

1.6.1. 動畫實現原理

核心原理：通過定時器 setInterval() 不斷移動盒子位置。

實現步驟：

獲得盒子當前位置
讓盒子在當前位置加上1個移動距離
利用定時器不斷重復這個操作
加一個結束定時器的條件
注意此元素需要添加定位，才能使用element.style.left

1.6.2. 動畫函數給不同元素記錄不同定時器

如果多個元素都使用這個動畫函數，每次都要var 聲明定時器。我們可以給不同的元素使用不同的定時器（自己專門用自己的定時器）。

核心原理：利用 JS 是一門動態語言，可以很方便的給當前對象添加屬性。

 function animate(obj, target) {// 當我們不斷的點擊按鈕，這個元素的速度會越來越快，因為開啟了太多的定時器// 解決方案就是 讓我們元素只有一個定時器執行// 先清除以前的定時器，只保留當前的一個定時器執行clearInterval(obj.timer);obj.timer = setInterval(function() {if (obj.offsetLeft >= target) {// 停止動畫 本質是停止定時器clearInterval(obj.timer);}obj.style.left = obj.offsetLeft + 1 + 'px';}, 30);}