js动画效果（移动、变化效果）

作者：root
图片实现减速滑动到指定位置，在网页效果上看起来比较美观，对用户比较友善，这种效果的实现整理下发现有一个固定的模式。
实现步骤：
  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);
        timeinter= setInterval(function(){
            current = current +(target-current)/20;
            obj.style.top = current+"px";  //实现obj对象的移动效果
        },20);
    }