天天看点

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)