<button>點擊觸發1</button><button>點擊觸發2</button><div></div> <style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;background-color: red;position: relative;top: 100px;left: 0;}.div1{display: block;width: 50px;height: 50px;background-color: gold;margin-top: 200px;position: relative;top: 0;left: 0;}</style> <script>var box = document.querySelector('div');// var box1 = document.querySelector('.div1');// var span = document.querySelector('span');var btn1 = document.querySelector('button:nth-child(1)');var btn2 = document.querySelector('button:nth-child(2)');//給時間函數的變量設置為nullvar timeID = null;//進行點擊事件：btn1.onclick = function(){//動畫函數封裝的調用animation(box,0,700,20,60);// animation(box1,0,700,20,60);}btn2.onclick = function(){//動畫函數封裝的調用animation(box,700,200,20,60);// animation(box1,0,700,20,60);}//定義一個節流閥,默認動畫已經執行完，可以執行下一個動畫效果了var flag = true;//形參有，屬性，起始位置，終點位置，每次移動的距離，所需要的時間function animation(element,current,target,step,time){//添加一個判斷條件，防止在一個事件中調用多次動畫效果//為此同時所有在動畫效果內的 flag前都添加上elementif(!element.flag){element.flag = true;} if(element.flag){//修改flag為false,代表動畫正在執行element.flag = false;//讓當前的起始位置跟元素的位置相同current = element.offsetLeft; //判斷事件函數是否是nullif(element.timeID != null){//刪除時間clearInterval( element.timeID);element.timeID = null}element.timeID = setInterval(function(){//開始移動元素的位置if(current > target){//設置為負數step = -Math.abs(step);}//判斷兩點之間的距離 和每次移動的距離比較if(Math.abs(target - current) <= Math.abs(step)){//最后將最終位置賦值給起始位置current = target;// 同時刪除時間函數clearInterval(element.timeID );//當動畫被清楚時，使flag為true;element.flag = true;}else{// 每次移動的距離進行相加賦值current += step;}//將移動的距離賦值給目標element.style.left = current + 'px';},time);//添加事件函數的運行時間}//設置一個返回值，考試調用者動畫是否結束return flag;}</script>

實現效果：

進行動畫函數的封裝：

//window.onload = function(){var timeID = null;var flag = true;//形參有，屬性，起始位置，終點位置，每次移動的距離，所需要的時間function animation(element,current,target,step,time){if(flag){//修改flag為false,代表動畫正在執行flag = false;//讓當前的起始位置跟元素的位置相同current = element.offsetLeft; //判斷事件函數是否是nullif(element.timeID != null){//刪除時間clearInterval( element.timeID);element.timeID = null}element.timeID = setInterval(function(){//開始移動元素的位置if(current > target){//設置為負數step = -Math.abs(step);}//判斷兩點之間的距離 和每次移動的距離比較if(Math.abs(target - current) <= Math.abs(step)){//最后將最終位置賦值給起始位置current = target;// 同時刪除時間函數clearInterval(element.timeID );//當動畫被清楚時，使flag為true;flag = true;}else{// 每次移動的距離進行相加賦值current += step;}//將移動的距離賦值給目標element.style.left = current + 'px';},time);//添加事件函數的運行時間}//設置一個返回值，考試調用者動畫是否結束return flag;}//};//調用方式為： // btn1.onclick = function(){ // //動畫函數封裝的調用 // animation(box,0,700,20,60); // }

總結

以上是生活随笔為你收集整理的最终的动画函数封装（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。