本文實(shí)例講述了JS多物體實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法。分享給大家供大家參考，具體如下：
<!DOCTYPE HTML><html><head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title></head><body><div id="odiv" style="position:absolute;width:200px;height:200px;background:red;left:0;"></div><div id="odiv1" style="position:absolute;width:200px;height:200px;background:red;left:0;top:250px;"></div><script type="text/javascript">var odiv=document.getElementById('odiv');var odiv1=document.getElementById('odiv1');odiv.onclick=function(){move(odiv,500);}odiv1.onclick=function(){move(odiv1,500);}function move(obj,target){ clearInterval(dt);var dt=setInterval(function(){var ol=parseInt(obj.style.left); if(ol==target){ clearInterval(dt); }else{var speed=(target-ol)/8; speed>0?speed=Math.ceil(speed):speed=Math.floor(speed); obj.style.left=ol+speed+"px"; } },30);}</script></body></html>更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
