本文實例講述了javascript彈性運動效果簡單實現方法。分享給大家供大家參考，具體如下：
彈性運動實現原理：加速運動+減速運動+摩擦運動
運行效果截圖如下：
實例代碼如下：
<!doctype html><html><head><meta charset="utf-8"><title>無標題文檔</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var iSpeed = 0;var left = 0;function startMove(obj, iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ iSpeed += (iTarget - obj.offsetLeft)/5; iSpeed *= 0.7; left += iSpeed; if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ clearInterval(obj.timer); obj.style.left = iTarget + 'px'; }else{ obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><input id="btn1" type="button" value="運動" /><div id="div1"></div><div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div></body></html>更多關于JavaScript運動效果相關內容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
