原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng)
本文給大家分享一個(gè)用原生JS實(shí)現(xiàn)的復(fù)合運(yùn)動(dòng),所謂復(fù)合運(yùn)動(dòng)就是在同一個(gè)進(jìn)間段內(nèi)不同的屬性都會(huì)發(fā)生變化,效果如下:
實(shí)現(xiàn)代碼如下,歡迎大家復(fù)制粘貼及吐槽。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS實(shí)現(xiàn)各種運(yùn)動(dòng)之復(fù)合運(yùn)動(dòng)</title> <style> #div1 { width: 100px; height: 100px; background: red; opacity: 0.3; } </style> <script> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { //設(shè)定開(kāi)關(guān),防止某一個(gè)值達(dá)到后其它值停止變化 var bStop = true; for (var attr in json) { var iCur = 0; if (attr == 'opacity') { iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100); } else { iCur = parseInt(getStyle(obj, attr)); }; var iSpeed = (json[attr] - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //如果某一個(gè)值還沒(méi)有達(dá)到,bStop就為false if (iCur != json[attr]) { bStop = false; }; if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } //最后一輪循環(huán)時(shí)如果為true,才清除定時(shí)器 if (bStop) { clearInterval(obj.timer); if (fn) { fn(); } } }, 30) } </script> <script> window.onload = function () { var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function () { startMove(oDiv, { width: 400, height: 200, opacity: 100 }); }; }; </script> </head> <body style="background:#0F0;"> <input id="btn1" type="button" value="開(kāi)始運(yùn)動(dòng)" /> <div id="div1"></div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Python機(jī)器學(xué)習(xí)NLP自然語(yǔ)言處理Word2vec電影影評(píng)建模
- Python機(jī)器學(xué)習(xí)NLP自然語(yǔ)言處理基本操作精確分詞
- Python機(jī)器學(xué)習(xí)NLP自然語(yǔ)言處理基本操作新聞分類
- Python機(jī)器學(xué)習(xí)NLP自然語(yǔ)言處理基本操作關(guān)鍵詞
- Python機(jī)器學(xué)習(xí)NLP自然語(yǔ)言處理基本操作詞向量模型
- Python機(jī)器學(xué)習(xí)NLP自然語(yǔ)言處理基本操作家暴歸類
- 淺談Python NLP入門教程
- Python機(jī)器學(xué)習(xí)NLP自然語(yǔ)言處理基本操作電影影評(píng)分析
相關(guān)文章
javascript 分號(hào)總結(jié)及詳細(xì)介紹
這篇文章主要介紹了javascript 分號(hào)總結(jié)及詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09JavaScript遞歸函數(shù)定義與用法實(shí)例分析
這篇文章主要介紹了JavaScript遞歸函數(shù)定義與用法,結(jié)合實(shí)例形式分析了javascript遞歸的原理、函數(shù)定義、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-01-01淺析如何在Bash中調(diào)用Node運(yùn)行JS文件進(jìn)行數(shù)據(jù)通信
這篇文章主要來(lái)和大家探討在 Bash 中調(diào)用 Node 運(yùn)行 JS 文件時(shí)如何進(jìn)行數(shù)據(jù)通信,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03JS正則匹配URL網(wǎng)址的方法(可匹配www,http開(kāi)頭的一切網(wǎng)址)
這篇文章主要介紹了JS正則匹配URL網(wǎng)址的方法,可實(shí)現(xiàn)匹配www,http開(kāi)頭的一切網(wǎng)址的功能,涉及JS正則匹配字符串、數(shù)字及特殊字符構(gòu)建URL的操作技巧,需要的朋友可以參考下2017-01-01基于JS編寫(xiě)開(kāi)心消消樂(lè)游戲的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)開(kāi)心消消樂(lè)小游戲,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06Javascript實(shí)現(xiàn)的簡(jiǎn)單右鍵菜單類
這篇文章主要介紹了Javascript實(shí)現(xiàn)的簡(jiǎn)單右鍵菜單類,通過(guò)JavaScript自定義類實(shí)現(xiàn)右鍵菜單功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09