首先从最基本的运动框架开始讲起
function startMove() { var oDiv=document.getElementById(‘div1‘); setInterval(function (){ oDiv.style.left=oDiv.offsetLeft+10+‘px‘; }, 30); }
让一个div不断往右移动，每隔30毫秒移动10个像素。
但是这个div没有一个目的地，我们要让它在目的地停止运动，即在offsetLeft达到目标位置(target)的时候关闭定时器。
var timer=null; function startMove() { var oDiv=document.getElementById(‘div1‘); timer=setInterval(function (){ if(oDiv.offsetLeft==300) { clearInterval(timer); } oDiv.style.left=oDiv.offsetLeft+10+‘px‘; }, 30); }
我还想要控制这个div移动的速度，我们可以自己来规定速度。
但是自己规定速度会出现一个问题，如果我们把速度设置成7，而目的地设为300，那么div的offsetLeft永远不会等于300，所以条件要变成大于等于300。
var timer=null; function startMove() { var oDiv=document.getElementById(‘div1‘); timer=setInterval(function (){ var speed=7; if(oDiv.offsetLeft>=300) { clearInterval(timer); } oDiv.style.left=oDiv.offsetLeft+speed+‘px‘; }, 30); }
另外我们还要把移动的语句写在else分支里，避免让button被点击执行startMove()方法的时候，哪怕div的offsetLeft已经大于等于target都会执行一次。
这是一个很重要的原则，即，把运动和停止隔开(if/else)。
var timer=null; function startMove() { var oDiv=document.getElementById(‘div1‘); timer=setInterval(function (){ var speed=10; if(oDiv.offsetLeft>=300) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+‘px‘; } }, 30); }
另外如果我们不断点击button让startMove()被执行，这个时候会有多个定时器被开，导致div的运动不断加速。
所以，我们要保证只能开启一个定时器，所以我们要在开始运动时关闭已有定时器。
var timer=null; function startMove() { var oDiv=document.getElementById(‘div1‘); clearInterval(timer); timer=setInterval(function (){ var speed=1; if(oDiv.offsetLeft>=300) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+‘px‘; } }, 30); }
我们为了方便在应用运动框架的时候调用更简单，就要把运动方法抽象的更彻底一些。
我们通过给speed单独赋值来控制速度，现在我们把目的地target设置成调用时候的参数，这样运动方法的灵活性就会更强。
var timer=null; function startMove(iTarget) { var oDiv=document.getElementById(‘div1‘); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(oDiv.offsetLeft>iTarget) { speed=-10; } else { speed=10; } if(oDiv.offsetLeft==iTarget) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+‘px‘; } }, 30); }
透明度运动框架
我们可以改变div的width和height或者其他种种，但是div有一个属性比较特殊，那就是透明度opacity。
更烦的一点是，opacity存在浏览器兼容问题：
在IE下，opacity的css要写成
{filter:alpha(opacity:30);}
在chrome下，opacity的css要写成
{opacity:0.3;}
IE下是百分比形式，chrome下是浮点数形式，数值都会有差异。
最关键的一点是，javascript并不存在获取透明度的原生写法，所以我们只能用变量提前存储好我们设置好的opacity来进行代替，然后在运动的时候设置div的opacity。
var alpha=30; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById(‘div1‘); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(alpha<iTarget) { speed=10; } else { speed=-10; } if(alpha==iTarget) { clearInterval(timer); } else { alpha+=speed; oDiv.style.filter=‘alpha(opacity:‘+alpha+‘)‘; oDiv.style.opacity=alpha/100; } }, 30); }
原文：http://www.cnblogs.com/zcynine/p/5118559.html