直接上代码：
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); } //变速运动
后面我尝试用面向对象的方式来总结：（初步优化）
function getStyle(obj,name){ if(obj.currentStyle!=undefined){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function move(id,speed,iTarget,timeSpan){ var othis=this; this.obj=$(id); this.speed=speed; this.iTarget=iTarget; this.timer=null; this.timeSpan=timeSpan; this.step //开始 this.start=function (){ clearInterval(this.timer); this.timer=setInterval(function (){ var iNow=parseInt(getStyle(othis.obj,'width')); //当前的长度； var len=Math.abs(othis.iTarget-iNow); if(othis.speed>len){ othis.stopMove(); }else{ othis.obj.style['width']=iNow+othis.speed+'px'; } },this.timeSpan) } //获取步长 如果是匀速运动，则不需要我们的这个方法，所谓的部长就是我们的speed； this.getStep=function (iNow,iTarget){ var iStep=(iTarget-iNow)/this.step; if(iStep==0) return 0; iStep=iStep>0?Math.ceil(iStep):Math.floor(iStep); return iStep; } //运动停止；//进行我们代码一步一步的优化滴呀； this.stopMove=function (){ clearInterval(this.timer); this.obj.style['width']=this.iTarget+'px'; } } function start(){ var m=new move('div1',10,300,20); m.start(); //这个就是我们的简答的运动滴 //为了更好地额完成继承的功能，我们的额方法和属性，最后写在我们的prototype中id一呀 }