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

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

实现步骤：

1. 定义需要修改的属性当前值：var current = 0；
2. 定义需要修改的属性目标值：var target = 值；
3. 定义一个定时器对象：var timeinter= null; 
4. 借助setInterval来循环按针每20毫秒修改current值一次
5. 当current值和target值相等时，则停止setInterval方法的执行

值得注意的是，在每次调用setinterval这个方法前，要清空之前的setinterval，不然会出现多个同时跑。这里可以理解为java的线程，每次运行setinterval都跑了一个小线程，而我们想要的效果是每次只跑一个线程，如果不清空就会导致多个setinterval作用在一个对象上面，使得动画效果越来越快或出现其他不正常的效果。定时器timeinter的作用就是在下一个setingerval跑之前清空前一个。

代码结构示例：

var srcInter = null; 
var current = 0;
    window.onscroll = function () {
        var target = 400;
        clearInterval(timeinter);
        timei