做一个普通的动画效果,js是怎么完成的呢.看一下例子 用window.setInterval 动画函数 ,每隔10毫秒 都会去执行一次动画 ; 和 set配套的是 clearInterval 函数，用来结束动画。 每隔setInterval 都会返回一个类似于线程id的值 ; var interval =setInterval(function(){ element.style.left =parseFloat(element.style.left) +(n) +'px'; },10); 用 clearInterval (interval) 既可结束动画播放. interval = setInterval(function(){ if(parseFloat(element.style.left)>500) clearInterval(interval) element.style.left =parseFloat(element.style.left) +2 +'px'; },10); 超过500px的时候，动画就会停止， element将不在移动。 但是上面的动画是比较生硬的，然后我们有另外一种时间线动画。 看例子: var element = document.getElementById('test1'); var start = +new Date,dur=1000,finish = start+dur; interval = setInterval(function(){ var time = +new Date, pos = time > finish ? 1 : (time-start)/dur; element.style.left = (100*pos)+"px"; if(time>finish) { clearInterval(interval); } },10); start 为目标动画的开始时间 ( +new Date 其实就是 new Date().getTime() ) dur 为 动画执行一共所需要的时间 finish 是目标动画结束的时间 pos = time > finish ? 1 : (time-start)/dur; //可以把pos 想象成频率 ，一个时间比 (100*pos) ，100代表距离,，如果距离为500px 就设置为 500*pos; time>finish : 如果超过时间，就停止动画! 很好，到这里我们已经知道一个简单动画效果是怎么样写的了. 再来看一个小型的完整的动画组件是如何写的 :