javascript實(shí)現(xiàn)勻速動(dòng)畫(huà)效果
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)勻速動(dòng)畫(huà)的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)思路:
1、主要使用定時(shí)函數(shù)setInterval()來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果
2、可以將動(dòng)畫(huà)封裝成一個(gè)函數(shù),這樣可以多個(gè)元素調(diào)用,不用重復(fù)寫(xiě)
3、動(dòng)畫(huà)函數(shù)接收參數(shù)- - -元素對(duì)象、目標(biāo)偏移量、回調(diào)函數(shù)
①函數(shù)里添加一個(gè)定時(shí)函數(shù),給定時(shí)函數(shù)一個(gè)名字,后面清除定時(shí)函數(shù)要使用定時(shí)函數(shù)名
②定時(shí)函數(shù)里面處理程序:
a. 給一個(gè)固定的每步移動(dòng)值,設(shè)置元素對(duì)象的偏移量勻速變化- - -eg: obj.style.left = obj.offsetLeft + 5 + ‘px';
b. 判斷偏移量是否達(dá)到目標(biāo)值,達(dá)到的話停止動(dòng)畫(huà)- - -
clearInterval(obj.timer);
并且在動(dòng)畫(huà)停止時(shí)判斷是否存在回調(diào)函數(shù),有回調(diào)函數(shù)的話執(zhí)行回調(diào)函數(shù)
4、在動(dòng)畫(huà)函數(shù)的最前面添加清除定時(shí)器函數(shù),清除之前的動(dòng)畫(huà)影響- - -clearInterval(obj.timer);
有時(shí)需要點(diǎn)擊按鈕后,觸發(fā)動(dòng)畫(huà)這種,沒(méi)有添加清除的話,重復(fù)點(diǎn)擊按鈕,動(dòng)畫(huà)效果會(huì)疊加,越來(lái)越快
5、也可以將動(dòng)畫(huà)函數(shù)封裝到j(luò)s文件中進(jìn)行引用
小提示:以上只是一種方法,不同動(dòng)畫(huà)效果根據(jù)所需進(jìn)行調(diào)整實(shí)現(xiàn)方法
代碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>勻速動(dòng)畫(huà)</title> <style> .box { position: relative; width: 1000px; margin-top: 20px; } .xiaohuli { position: absolute; top: 0; left: 0; width: 150px; height: 150px; } .pikaqiu { position: absolute; top: 150px; left: 0; width: 200px; height: 150px; } </style> </head> <body> <button class="btn1">點(diǎn)擊移動(dòng)小狐貍</button> <button class="btn2">點(diǎn)擊移動(dòng)皮卡丘</button> <div class="box"> <img src="images/小狐貍.jpg" alt="" class="xiaohuli"> <img src="images/皮卡丘.jpg" alt="" class="pikaqiu"> </div> <script> var btn1 = document.querySelector('.btn1'); var btn2 = document.querySelector('.btn2'); var xiaohuli = document.querySelector('.xiaohuli'); var pikaqiu = document.querySelector('.pikaqiu'); btn1.addEventListener('click', function() { animate(xiaohuli, 300); }) btn2.addEventListener('click', function() { animate(pikaqiu, 450); }) // 動(dòng)畫(huà)函數(shù) obj動(dòng)畫(huà)對(duì)象, target目標(biāo)左偏移量, callback回調(diào)函數(shù) function animate(obj, target, callback) { clearInterval(obj.timer); obj.timer = setInterval(function() { obj.style.left = obj.offsetLeft + 5 + 'px'; if (obj.offsetLeft >= target) { // 停止動(dòng)畫(huà) clearInterval(obj.timer); // 如果有回調(diào)函數(shù),執(zhí)行回調(diào)函數(shù) if (callback) { callback(); } } }, 30); } </script> </body> </html>
頁(yè)面效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 閉包機(jī)制詳解及實(shí)例代碼
這篇文章主要介紹了JavaScript 閉包機(jī)制詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10基于input框覆蓋掉數(shù)字英文的實(shí)例講解
下面小編就為大家?guī)?lái)一篇基于input框覆蓋掉數(shù)字英文的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07JS簡(jiǎn)單編號(hào)生成器實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡(jiǎn)單編號(hào)生成器實(shí)現(xiàn)方法,涉及JavaScript針對(duì)表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04JS獲取表格內(nèi)指定單元格html內(nèi)容的方法
這篇文章主要介紹了JS獲取表格內(nèi)指定單元格html內(nèi)容的方法,涉及javascript中innerHTML屬性的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03