直接上代码：
HTML
<body> <input type="button" value="100" onclick="show(100)"/> <input type="button" value="300" onclick="show(300)"/> <input type="button" value="减速100" onclick="show(100)"/> <input type="button" value="减速300" onclick="show(300)"/> <div id="div1"> </div> <div id="div2"> </div> <div id="move"> </div> </body>
CSS
#div1{ height:300px; width:1px; position:absolute; left:100px; background:green; } #div2{ height:300px; width:1px; position:absolute; left:300px; background:green; } #move{ height:200px; width:200px; position:absolute; left:600px; background:green; }
JavaScript
//匀速运动 //开一个定时器 var Timer=null; function evenMove(iTarget){ var obj=document.getElementById("move"); var offsetLeft=obj.offsetLeft; var speed=0; //通过目标和物体之间的距离俩判断速度的正负 //也就是他的方向滴啊 if(iTarget-offsetLeft>0){ speed=4; //匀速运动速度是固定的 }else{ speed=-4; } //先先清除Timer，以免多次点击； clearInterval(Timer); Timer=setInterval(function (){ //if(Math.abs(iTarget-offsetLeft)<Math.abs(speed)){ //这里的offsetleft也不能写死， //它是动态获取的 if(Math.abs(iTarget-obj.offsetLeft)<Math.abs(speed)){ //就认为物体已经到达了终点 clearInterval(Timer);//终止运动 //强行移动到终点; obj.style.left=iTarget+‘px‘; }else{ //继续运动 // obj.style.left=offsetLeft+speed+‘px‘; 这里不能写死 offsetLeft //必须动态获取 obj.style.left=obj.offsetLeft+speed+‘px‘; } },30) } //后面我们可以考虑用面向对象的方式来进行改造滴呀 var subTimer=null; function subMove(iTarget){ //变速运动中速度变化 因为会遇到取整的问题 var obj=document.getElementById("move"); clearInterval(subTimer); subTimer=setInterval(function (){ //变速运动 速度是变化滴呀 var speed=(iTarget-obj.offsetLeft)/5; //这里不一定整除，所以要.. speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetLeft==iTarget){ clearInterval(subTimer); alert(‘运动停止‘); }else{ obj.style.left=obj.offsetLeft+speed+‘px‘; } },30) } function show(arg){ //evenMove(arg);//这个匀速运动的框架就算是完成了滴呀 subMove(arg); } //变速运动
后面我尝试用面向对象的方式来总结：
原文：http://www.cnblogs.com/mc67/p/5195736.html