1.元素偏移量offset系列
1.1offset概述
offset翻譯過來就是偏移量，我們使用offset系列相關屬性可以動態的得到該元索的位置(偏移)、大小等。
- 獲得元素距離帶有定位父元素的位置
- 獲得元素自身的大小 (寬度高度)
- 注意:返回的數值都不帶單位
offset系列常用屬性:
1.2offset與style區別
2.元素可視區client系列
client翻譯過來就是客戶端,我們使用client系列的相關屬性來獲取元素可視區的相關信息。通過client系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等。
3.mouseenter和mouseover的區別
mouseenter鼠標事件：
- 單鼠標移動到元素上時就會觸發mouseenter事件
- 類似於mouseover，它們之間的的差別是
- mouseover鼠標經過自身盒子會觸發，經過子盒子還會觸發，mouseover只會經過自身盒子觸發
- 之所會這樣，就是因爲mouseenter不會冒泡
- 跟mouseenter搭配鼠標離開mouseleave同樣不會冒泡
4.動畫函數封裝
4.1動畫實現原理
核心原理：通過定時器setlnterval()不斷移動盒子位置
實現步驟：
1.獲得盒子當前位置
2.讓盒子在當前位置加上1個移動距離
3.利用定時器不斷重複這個操作
4.加一個結束定時器的條件
5.注意此元素需要添加定位，才能使用element.style.left
4.2動畫函數簡單封裝
注意函數需要傳遞2個參數，動畫對象和移動的距離
4.3緩動效果原理
緩動動畫就是讓元素運動速度有所變化，最常見的就是讓速度慢慢停下來
思路：
1.讓盒子每次移動的距離慢慢變小，速度就會慢慢落下來
2.核心算法：（目標值 - 現在的值）/ 10 作爲每次移動距離步長
3.停止的條件是：讓當前盒子位置等於目標位置就停止定時器
4.4.動畫函數多個目標值之間移動
可以讓動畫函數從800移動到500
當我們點擊按鈕時候，判斷步長是正值還是負值：
1.如果是正值，則步長往大了取整
2.如果是負值，則步長往小了取整
<!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>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">點擊後紫色盒子運動到500</button>
<button class="btn800">點擊後紫色盒子運動到800</button>
<div></div>
<span></span>
<script>
//簡單動畫函數封裝 obj目標函數 target目標位置
// 給不同的的元素指定不同的定時器
function animate(obj, target) {
//當我們不斷點擊按鈕,這個元素速度會越來越快
//解決方案就是讓我們元素只有一個定時器執行
//先清除以前的定時器 只保留當前一個定時器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//步長值寫到定時器的裏面
//把步長值改爲整數 不要出現小數問題
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// var step = Math.ceil((target - obj.offsetLeft) / 10);
if (obj.offsetLeft == target) {
//停止動畫本質是停止定時器
clearInterval(obj.timer);
}
//把每次加1 這個步長改爲一個慢慢變小的值 步長公式:(目標值 - 現在的位置) /10
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
//1.動畫原理
var div = document.querySelector('div');
animate(div, 300);
var span = document.querySelector('span');
// animate(span, 200);
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
animate(span, 500);
})
btn800.addEventListener('click', function() {
animate(span, 800);
})
//勻速動畫 就是 盒子是當前位置 + 固定值
//緩動動畫 盒子當前位置 + 變化的值(目標值 - 現在的位置) / 10
</script>
</body>
</html>
4.5動畫函數添加回調函數
回調函數原理：函數可以作爲一個參數，將這個函數作爲參數傳到另一個函數裏面，當那個函數執行完之後，再執行傳進去的這個函數，這個過程就叫做回調。
回調函數寫的位置：定時器結束的位置
<!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>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
left: 0;
top: 200px;
display: block;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button class="btn500">點擊後紫色盒子運動到500</button>
<button class="btn800">點擊後紫色盒子運動到800</button>
<div></div>
<span></span>
<script>
//簡單動畫函數封裝 obj目標函數 target目標位置
// 給不同的的元素指定不同的定時器
function animate(obj, target, callBack) {
//當我們不斷點擊按鈕,這個元素速度會越來越快
//解決方案就是讓我們元素只有一個定時器執行
//先清除以前的定時器 只保留當前一個定時器
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//步長值寫到定時器的裏面
//把步長值改爲整數 不要出現小數問題
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
// var step = Math.ceil((target - obj.offsetLeft) / 10);
if (obj.offsetLeft == target) {
//停止動畫本質是停止定時器
clearInterval(obj.timer);
//回調函數寫到定時器結束裏面
if (callBack) {
callBack();
}
}
//把每次加1 這個步長改爲一個慢慢變小的值 步長公式:(目標值 - 現在的位置) /10
obj.style.left = obj.offsetLeft + step + 'px';
}, 30);
}
//1.動畫原理
var div = document.querySelector('div');
animate(div, 300);
var span = document.querySelector('span');
// animate(span, 200);
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
btn500.addEventListener('click', function() {
animate(span, 500);
})
btn800.addEventListener('click', function() {
animate(span, 800, function() {
span.style.backgroundColor = 'red';
});
})
//勻速動畫 就是 盒子是當前位置 + 固定值
//緩動動畫 盒子當前位置 + 變化的值(目標值 - 現在的位置) / 10
</script>
</body>
</html>
4.6動畫函數封裝到單獨JS文件裏面
經常使用動畫函數，可以單獨封裝到一個JS文件裏面，使用的時候引入JS文件即可
5.節流閥
防止輪播圖按鈕連續點擊造成播放過快
節流閥目的：當上一個函數動畫內容執行完畢，再去執行下一個函數動畫，讓事件無法連續觸發
核心實現思路：利用回調函數，添加一個變量來控制，鎖住函數和解鎖函數。