本文實例為大家分享了js實現單方向勻速運動的具體代碼,供大家參考,具體內容如下
代碼如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id='box'></div> <script> var oBox = document.getElementById("box"); var maxLeft = utils.win('clientWidth')-oBox.offsetWidth; var step = 5; var timer = window.setInterval(function(){ var curLeft = utils.css(oBox,"left"); if(curLeft+step >= maxLeft){//邊界判斷 utils.css(oBox,"left",maxLeft); window.clearInterval(timer); return; } curLeft+=step; utils.css(oBox,"left",curLeft); },10) //問題:當總距離/我們設定的步長 = 不是一個整數。少走一步還差點距離到目標位置,多走一步會超出目標的位置 //解決:在進行邊界判斷的時候加上步長來進行處理 </script></body></html>以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答