主要實作以下幾種簡單的影片效果（其實原理基本相同）：
1.勻速影片：物體的速度固定
2.緩動影片：物體速度逐漸變慢
3.多物體影片
4.透明度影片
效果實作：
1.勻速影片（以物體左右勻速運動為例）
影片效果主要是用定時器setInterval()來實作的，每隔幾毫秒讓物體移動一點距離，通過不斷呼叫定時器來達到讓物體運動的效果，
將定時器放在一個函式內，定義物體的運動速度speed為10，判斷物體的運動方向（向左走或向右走）來規定speed的正負；
然后將 物體的offsetLeft加上速度speed 賦值給物體的left樣式值（要給物體設定定位）；
當物體到達目標位置時清除定時器；
1 var box = document.querySelector('.box'); // 獲取box盒子 2 box.addEventListener("mouseover", function() { 3 animate(400); // 當滑鼠經過盒子時，讓盒子運動到400的位置 4 }); 5 var timer = null; // 宣告一個變數來存盤定時器 6 function animate(target) { // target 目標位置 7 clearInterval(timer); // 開啟定時器前要先關閉上一個定時器，不然定時器會累加導致速度越來越快 8 timer = setInterval(function() { 9 var speed = 10; // 速度 固定值10 10 speed = box.offsetLeft < target ? speed : - speed; // 判斷是向左走（負）還是向右走（正） 11 if(box.offsetLeft == target) { 12 clearInterval(timer); // 盒子到達目標值時清除定時器 13 } else { 14 box.style.left = box.offsetLeft + speed + 'px'; 15 } 16 },25) 17 }
2.緩動影片（和勻速運動相同原理，只不過速度做些改變）
讓速度等于 目標值和當前位置之差/10，二者之差會越來越小，即速度speed也會越來越小；
二者之差除以十并不總是整數，可能會導致物體位置和目標值不能完全相等，所以需要對speed進行取整，大于0向上取整，小于0向下取整；
1 var box = document.querySelector('.box'); 2 box.addEventListener("mouseover", function() { 3 animate(400); 4 }); 5 var timer = null; 6 function animate(target) { 7 clearInterval(timer); 8 timer = setInterval(function() { 9 var speed = (target - box.offsetLeft) / 10; // 速度為目標值和當前位置之差/10 10 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 判斷speed的正負，大于0向上取整，小于0向下取整 11 if(box.offsetLeft == target) { 12 clearInterval(timer); 13 } else { 14 box.style.left = box.offsetLeft + speed + 'px'; 15 } 16 }, 25) 17 }
3.多物體影片（相同原理，不過要多開器幾個定時器）
因為有多個物體要做影片，所以要給每個物體都要開啟一個定時器，向上邊那樣只宣告一個timer是不行的，
所以要回圈遍歷每個li（我是用串列寫了幾個小盒子），給每個li宣告一個timer來存盤各自的定時器，
并且要給animate函式多添加一個形參obj來區分是哪個盒子的定時器
1 var lis = document.querySelectorAll('li'); 2 for(var i = 0; i < lis.length; i++) { // 回圈遍歷li 3 lis[i].timer = null; // 給每個li宣告一個timer來存盤定時器 4 lis[i].addEventListener("mouseover", function() { 5 animate(this, 400); 6 }); 7 } 8 function animate(obj, target) { 9 clearInterval(obj.timer); 10 obj.timer = setInterval(function() { 11 var speed = (target - obj.offsetLeft) / 10; 12 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 13 if(obj.offsetLeft == target) { 14 clearInterval(obj.timer); 15 } else { 16 obj.style.left = obj.offsetLeft + speed + 'px'; 17 } 18 }, 25) 19 }
4.透明度影片（與勻速運動相似）
宣告一個alpha變數來存盤當前的透明度，speed為速度，當前透明度加速度 賦值給盒子的透明度樣式，
（多個物體透明度也是和上邊多物體影片一樣的，給每個物體都添加一個定時器，并給animate函式多一個形參obj）
1 <style> 2 .box { 3 width: 200px; 4 height: 200px; 5 background-color: #f00; 6 opacity: 0.3; 7 filter: alpha(opacity = 30); /* 兼容IE8及以下的IE瀏覽器 */ 8 } 9 </style> 10 <script> 11 window.addEventListener('load', function() { 12 var box = document.querySelector('.box'); 13 box.addEventListener('mouseover', function() { 14 animateAlpha(100); // 滑鼠經過盒子 透明度變為1 15 }) 16 box.addEventListener('mouseout', function() { 17 animateAlpha(30); // 滑鼠離開透明度變為0.3 18 }) 19 var alpha = 30; // 存盤當前透明度 初始值為30 20 var timer = null; 21 function animateAlpha(target) { 22 clearInterval(timer); 23 timer = setInterval(function() { 24 var speed = 10; 25 speed = alpha < target ? speed : - speed; // 判斷速度的正負 26 if(alpha == target) { 27 clearInterval(timer); 28 } else { 29 alpha += speed; 30 /* 這里有兩個樣式都需要改變 */ 31 box.style.filter = 'alpha(opacity = '+ alpha +')'; 32 box.style.opacity = alpha / 100; // opacity別忘了除以100 33 } 34 }, 25); 35 } 36 }) 37 </script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/161052.html
標籤：JavaScript