<button>點(diǎn)擊觸發(fā)1</button><button>點(diǎn)擊觸發(fā)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)');//給時(shí)間函數(shù)的變量設(shè)置為nullvar timeID = null;//進(jìn)行點(diǎn)擊事件：btn1.onclick = function(){//動(dòng)畫函數(shù)封裝的調(diào)用animation(box,0,700,20,60);// animation(box1,0,700,20,60);}btn2.onclick = function(){//動(dòng)畫函數(shù)封裝的調(diào)用animation(box,700,200,20,60);// animation(box1,0,700,20,60);}//定義一個(gè)節(jié)流閥,默認(rèn)動(dòng)畫已經(jīng)執(zhí)行完，可以執(zhí)行下一個(gè)動(dòng)畫效果了var flag = true;//形參有，屬性，起始位置，終點(diǎn)位置，每次移動(dòng)的距離，所需要的時(shí)間function animation(element,current,target,step,time){//添加一個(gè)判斷條件，防止在一個(gè)事件中調(diào)用多次動(dòng)畫效果//為此同時(shí)所有在動(dòng)畫效果內(nèi)的 flag前都添加上elementif(!element.flag){element.flag = true;} if(element.flag){//修改flag為false,代表動(dòng)畫正在執(zhí)行element.flag = false;//讓當(dāng)前的起始位置跟元素的位置相同current = element.offsetLeft; //判斷事件函數(shù)是否是nullif(element.timeID != null){//刪除時(shí)間clearInterval( element.timeID);element.timeID = null}element.timeID = setInterval(function(){//開始移動(dòng)元素的位置if(current > target){//設(shè)置為負(fù)數(shù)step = -Math.abs(step);}//判斷兩點(diǎn)之間的距離 和每次移動(dòng)的距離比較if(Math.abs(target - current) <= Math.abs(step)){//最后將最終位置賦值給起始位置current = target;// 同時(shí)刪除時(shí)間函數(shù)clearInterval(element.timeID );//當(dāng)動(dòng)畫被清楚時(shí)，使flag為true;element.flag = true;}else{// 每次移動(dòng)的距離進(jìn)行相加賦值current += step;}//將移動(dòng)的距離賦值給目標(biāo)element.style.left = current + 'px';},time);//添加事件函數(shù)的運(yùn)行時(shí)間}//設(shè)置一個(gè)返回值，考試調(diào)用者動(dòng)畫是否結(jié)束return flag;}</script>

實(shí)現(xiàn)效果：

進(jìn)行動(dòng)畫函數(shù)的封裝：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。