元素偏移量offset系列
-
offset系列相關屬性可以動態的得到該元素的位置（偏移）、大小等。
1.可以獲得元素距離帶有定位父元素等位置。
2.可以獲得元素自身的大小（寬度和高度）。
注意：返回的數值都不帶單位。
- offset系列常用屬性：
| offset系列屬性 | 說明 |
|---|---|
| element.offsetParent | 返回作爲該元素帶有定位的父級元素 如果父級都沒有定位則返回body |
| element.offsetTop | 返回元素相對帶有定位父元素上方的偏移 如果沒有父級元素或者父級元素沒有定位，則以body爲準 |
| element.offsetLeft | 返回元素相對帶有定位父元素左邊框的偏移 如果沒有父級元素或者父級元素沒有定位，則以body爲準 |
| element.offsetWidth | 返回自身包括padding、邊框、內容區的寬度，返回數值不帶單位 |
| element.offsetHeight | 返回自身包括padding、邊框、內容區的高度，返回數值不帶單位 |
注意：
offsetParent和parentNode的區別：
1.offsetParent只返回帶有定位的父級元素，如果沒有，則返回body。
2.parentNode返回的是最近一級的父級元素，不管父級元素也沒有定位。
- offset和style的區別：
| offset | style |
|---|---|
| offset可以得到任意樣式表中的樣式值 | style只能得到行內樣式表中的樣式值 |
| offset系列獲得的數值是沒有單位的 | style獲得的是帶有單位的字符串 |
| offsetWidth包含padding+border+width | style.width獲得不包含padding和border的值 |
| offsetWidth等屬性是隻讀屬性，只能獲取不能賦值 | style.width等屬性是可讀屬性，可以獲取也可以賦值 |
| 獲取元素大小位置，用offset更合適 | 更改元素的值，用style更合適 |
元素可視區client系列
- client系列的相關屬性可以獲取元素可視區的相關信息，簡單來收，通過client系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。
| client系列屬性 | 說明 |
|---|---|
| element.clientTop | 返回元素上邊框的大小 |
| element.clientLeft | 返回元素左邊框的大小 |
| element.clientWidth | 返回自身包括padding、內容區的寬度，不含邊框，返回數值不帶單位 |
| element.clientHeight | 返回自身包括padding、內容區的高度，不含邊框，返回數值不帶單位 |
元素滾動scroll系列
- scroll系列的相關屬性可以動態的得到該元素的大小、滾動距離等。
| scroll系列 | 說明 |
|---|---|
| element.scrollTop | 返回被捲去的上側距離，返回數值不帶單位（包含上邊框大小） |
| element.scrollLeft | 返回被捲去的左側距離，返回數值不帶單位（包含左邊框大小） |
| element.scrollWidth | 返回自身實際的寬度，不含邊框，返回數值不帶單位 |
| element.scrollHeight | 返回自身實際的高度，不含邊框，返回數值不帶單位 |
-
scrollWidth和clientWidth最大的區別就是：如果盒子內容溢出或出現滾動條，則scrollWidth是指盒子內容的寬度；而clientWidth還是可視區的寬度。如果沒有內容沒有益處，則它們兩個是相同的。（scrollHeoght和clientHeight同理）
-
拓展：
1.頁面被捲去的頭部，可以通過window.pageYOffset獲得；而頁面被捲去的左側，則可以通過window.pageXOffset獲得。注意：元素被捲去的頭部，使用的是element.scrollTop。
2.頁面被捲去的頭部是有兼容性問題的，因此被捲去的頭部通常有如下幾種寫法：
（1）聲明瞭DTD（即< !DOCTYPE html >），使用document.documentElement.scrollTop
（2）未聲明DTD（即< !DOCTYPE html >），使用document.body.scrollTop
（3）新方法window.pageYOffset和window.pageXOffset，IE0以後才支持
function getScroll(){ return { left: window.pageXOffset || document.docuemntElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageYOffset || document.documntElement.scrollTop || document.body.scrollTop || 0 }; } //使用的時候，採取以下格式： getScroll().left
動畫函數封裝
1.動畫實現原理
-
核心原理：通過定時器setInterval()不斷移動盒子位置。
-
實現步驟如下：
1.獲得盒子當前位置。
2.讓盒子在當前位置加上1個移動距離。
3.利用定時器不斷重複這個操作。
4.加一個結束定時器的條件。
5.注意此元素需要添加定位，才能使用element.style.left。
2.動畫函數簡單封裝
- 動畫函數封裝需要傳遞2個參數，分別是動畫對象和移動到的距離。
function animate(obj, target){
var timer = setInterval(function(){
if(obj.offsetLeft >= target){
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},25);
}
- 如果多個元素都使用這個動畫函數，每次都要把var聲明定時器，並且都會在內存中開闢空間，導致浪費內存。
- 如果多個元素都使用這個動畫函數，而timer這個變量名都一樣，可能會造成歧義。
//優化結果1:
function animate(obj, target){ //obj這個傳過來的元素是一個對象
obj.timer = setInterval(function(){
if(obj.offsetLeft >= target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},25);
}
- 如果給一個加了動畫函數的元素綁定一個按鈕，只有點擊這個按鈕，元素纔會運動起來。當我們不斷點擊這個按鈕，這個元素的速度會越來越快。（因爲開啓了太多的定時器）
//優化結果2:
function animate(obj, target){ //obj這個傳過來的元素是一個對象
clearInterval(obj.timer);
obj.timer = setInterval(function(){
if(obj.offsetLeft >= target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},25);
}
-
緩動效果原理：緩動動畫就是讓元素運動速度有所變化，最常見的是讓速度慢慢停下來。
步驟：
1.讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來。
2.核心算法：”（目標值 - 現在的位置） / 10 ”作爲每次移動的距離步長。
3.停止的條件是：讓當前盒子位置等於目標位置就停止定時器。
-
緩動動畫基本代碼實現：
function animate(obj, target){ //obj這個傳過來的元素是一個對象
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var step = Math.ceil((target - obj.offsetLeft) / 10);
//計算結果是正數，需要通過Math.ceil()方法，使移動距離向上取整，才能使元素移動的結果是整數，
//而不是小數。（比如，想讓元素移動到500px，如果不加這個方法，那麼最後會移動到496.4px就停下來了）
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
},15);
}
//勻速動畫就是盒子當前的位置+固定值（10）
//緩動動畫就是盒子當前的位置+變化的值（目標值 - 現在的位置） / 10
- 緩動動畫在多個目標住之間移動：
function animate(obj, target){ //obj這個傳過來的元素是一個對象
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//var step = Math.ceil((target - obj.offsetLeft) / 10);
//計算結果是正數，需要通過Math.ceil()方法，使移動距離向上取整，才能使元素移動的結果是整數，
//而不是小數。（比如，想讓元素移動到500px，如果不加這個方法，那麼最後會移動到496.4px就停下來了）
//計算結果是負數，則往下取整。
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step + 'px';
},15);
}
-
動畫函數添加回調函數：
回調函數原理：函數可以作爲一個參數。將這個函數作爲參數傳到另一個函數裏面，當那個函數執行完之後，再執行傳進去的這個函數，這個過程就叫做回調。
function animate(obj, target,callback){ //obj這個傳過來的元素是一個對象
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//var step = Math.ceil((target - obj.offsetLeft) / 10);
//計算結果是正數，需要通過Math.ceil()方法，使移動距離向上取整，才能使元素移動的結果是整數，
//而不是小數。（比如，想讓元素移動到500px，如果不加這個方法，那麼最後會移動到496.4px就停下來了）
//計算結果是負數，則往下取整。
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
clearInterval(obj.timer);
//回調函數寫到定時器裏面
if(callback){
//調用函數
callback();
}
//或者可以寫成：callback && callback(); ——短路運算
}
obj.style.left = obj.offsetLeft + step + 'px';
},15);
}
-
動畫函數的使用：一般都是把這個動畫函數單獨封裝到一個JS文件中，使用的時候引用這個文件即可。
-
節流閥的目的：當上一個函數動畫內容執行完畢，再去執行下一個函數動畫，讓事件無法連續觸發。
核心思路：利用回調函數，添加一個變量來控制，鎖住函數和解鎖函數。
開始設置一個變量var flag = true; if(flag){ flag = false; //關閉水龍頭 do something } 利用回調函數，在動畫執行完畢後，通過flag = true 打開水龍頭
課外點
- mouseenter和mouseover的區別：mouseover鼠標經過自身盒子會觸發，經過子盒子也會觸發；而mouseenter只有經過自身盒子纔會觸發。（原因是：mouseenter和mouseleave不會冒泡）
微信公衆號也會定期更新，覺得文章寫得還可以的，可以加個關注！點個贊！謝謝！
