js动画效果（移动、变化效果）实现整理

如在前两篇博客中的效果，图片实现减速滑动到指定位置，在网页效果上看起来比较美观，对用户比较友善，这种效果的实现整理下发现有一个固定的模式。

实现步骤：

定义需要修改的属性当前值：var current = 0；
定义需要修改的属性目标值：var target = 值；
定义一个定时器对象：var timeinter= null; 
借助setInterval来循环按针每20毫秒修改current值一次
当current值和target值相等时，则停止setInterval方法的执行
值得注意的是，在每次调用setinterval这个方法前，要清空之前的setinterval，不然会出现多个同时跑。这里可以理解为java的线程，每次运行setinterval都跑了一个小线程，而我们想要的效果是每次只跑一个线程，如果不清空就会导致多个setinterval作用在一个对象上面，使得动画效果越来越快或出现其他不正常的效果。定时器timeinter的作用就是在下一个setingerval跑之前清空前一个。

代码结构示例：

var srcInter = null;
var current = 0;
window.onscroll = function () {
var target = 400;
clearInterval(timeinter);
timeinter= setInterval(function(){
current = current +(target-current)/20;
obj.style.top = current+"px"; //实现obj对象的移动效果
},20);
}