本文實例講述了javascript勻速運動實現方法。分享給大家供大家參考，具體如下：
勻速運動步驟：
1. 清除定時器
2. 開啟定時器
3. 運動是否完成：a、運動完成，清除定時器；b、運動未完成繼續
勻速運動停止條件：距離足夠近 Math.abs(當然距離-目標距離) < 最小運動距離
運行效果截圖如下：
div的勻速運動（簡單運動）示例：
<!doctype html><html><head><meta charset="utf-8"><title>JavaScript勻速運動</title><style>#div1{ width:100px; height:100px; background:red; position:absolute; top:50px; left:500px;}span{ width:1px; height:300px; background:black; position:absolute; left:300px; top:0; display:block;}</style><script>window.onload = function(){ var oBtn = document.getElementById('btn1'); var oDiv = document.getElementById('div1'); oBtn.onclick = function() { startMove(oDiv, 300); };};var timer = null;function startMove(obj, iTarget){ clearInterval(timer); timer = setInterval(function(){ var iSpeed = 0; if(obj.offsetLeft < iTarget) { iSpeed = 7; } else { iSpeed = -7; } if( Math.abs( obj.offsetLeft - iTarget ) < 7 ) { clearInterval(timer); obj.style.left = iTarget + 'px'; } else { obj.style.left = obj.offsetLeft + iSpeed + 'px'; } }, 30);}</script></head><body><button id="btn1">移動</button><div id="div1"></div><span></span></body></html>更多關于JavaScript運動效果相關內容可查看本站專題：《JavaScript運動效果與技巧匯總》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
