JS实现匀速运动的代码实例

效果

思路：利用setInerval()计时器，进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。代码：复制代码代码如下： head runat=' server ' title/title style type=' text/CSS ' # div 1 { width : 100px；高度： 100像素；背景# 0000FF绝对位置：left : 800 pxtop : 100 px } # div 200 { width : 1px高度： 400像素；背景# FF0000绝对位置：left : 200 px } # div 500 { width : 1px高度： 400像素；背景# FF0000绝对位置：left : 500 px }/样式脚本类型='text/javascript '函数移动(结束){ var oDiv=文档。getelementbyid(' div 1 ')；定义变量计时器=null timer=SetInterval(function(){ var speed=(end-odiv。offset left)/5；//根据终点和offsetLeft取出运动的速度速度=速度0?数学天花板（速度):数学地板（速度);//进位取整，小数位变为整位，//if(odiv。offsetleft=end){//clearInterval(定时器);//}//else {//odiv。风格。左=odiv。偏移速度“px”；//} if(数学。ABS(end-Odiv。offsetleft)=速度){//由于在停止的时候最后会出现小的缝隙，或者说没有完全的到达指定地点，所以要小于它的速度clearInterval(计时器);//当距离小于速度时，让计时器停止奥迪夫。风格。left=end ' px//在停止后填充缝隙。} else { Odiv。风格。左=Odiv。偏移速度“px”；//移动DIV } }，30)}/脚本/流浆池输入类型='button' id='btn1' value='到500的位置onclick=' move(500)；/input type=' button ' id=' BTN 2 ' value='到200的位置onclick=' move(200)；'/div id=' div 1 '/div div id=' div 200 ' 200/div id=' div 500 ' 500/div/body