天天看點

JS勻速運動

JS運動的基本原理:

讓Div運動起來,關鍵是修改物體的坐标,

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

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

setInterval(funtion(){

oDiv.style.left=offsetLeft+speed+'px'; (speed是每次移動的像素)

},30)

這樣就可以運動了,不過會的效果不是我們需要的。源代碼如下:

JS勻速運動

要讓運動的物體停下來:關鍵是确定offsetLeft的大小并且關掉定時器; 

var timer=null;

time=setInterval(function(){

                     if(oDiv.offsetLeft>=300){

clearInterval(timer);

                         }else{

oDiv.style.left=oDiv.offsetLeft+10+‘px’;}

},30)這樣還是有小瑕疵,就是多次點選造成的BUG,解決方法就是關閉上次的定時器:多加個clearInterval(timer)