JS勻速運動實例詳解

本文主要和大家分享JS勻速運動實例詳解，希望能幫助大家，我們先和大家介紹JS運動的基本原理。

JS運動的基本原理：

讓p運動起來，關鍵是修改物體的座標，

op.style.left=offsetLeft+speed+'px';

但是這只能移動一次，我們可以利用定時器的作用，讓這樣的操作'動'起來。

setInterval(funtion(){
op.style.left=offsetLeft+speed+'px'; （speed是每次移动的像素）
},30)

這樣就可以運動了，不過會的效果不是我們需要的。原始碼如下：

要讓運動的物件停下來：關鍵是確定offsetLeft的大小並且關掉計時器； 

var timer=null;
time=setInterval(function(){
                     if(op.offsetLeft>=300){
clearInterval(timer);
                         }else{
op.style.left=op.offsetLeft+10+‘px’；}
},30)这样还是有小瑕疵，就是多次点击造成的BUG，解决方法就是关闭上次的定时器：多加个clearInterval(timer)

相關推薦：

通用的等速運動框架如何打造

基於js等速運動的實例講解

##JavaScript中的勻速運動與變速(緩衝)運動詳細介紹_基礎知識#

以上是JS勻速運動實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！