js实现简单动画，多图动画，大位置到小位置

html部分

 <input type="button" id="btn1" value="点击我图片移动800px">
    <input type="button" id="btn2" value="点击我图片移动400px">

    <!-- 实现2个div竖着排列 -->
    <div id="pic"></div>
    <div id="pic2"></div>
    <div id="pic3"></div>

    <!-- 在写动画案例时，一定先在css样式中清空页面body的margin和 padding，因为带有margin的值，会影响后续的移动速度-->

js部分

 <script>
        //获取元素
        var btn1=document.getElementById('btn1');
        var btn2=document.getElementById('btn2');
        var pic=document.getElementById('pic');
        var pic2=document.getElementById('pic2');
        var pic3=document.getElementById('pic3');

        var target; //动画移动的目标位置
        var step;   //动画移动步长
        // var timerId=null;   //保证页面只有一个定时器//此处在后面多图动画代码中优化了，下面有优化原因
        var current;    //定义一个当前位置

        btn1.onclick=function(){
            animate(pic,800,10);   
            animate(pic2,800,10);  
            animate(pic3,800,10);         
        }
        btn2.onclick=function(){
            animate(pic,400,10);
            animate(pic2,400,10);  
            animate(pic3,400,10);  
        }

        //3、把图片移动的操作代码，封装，在点击按钮事件中，直接调用
        function animate(element,target,step) { 
            if(element.timerId){    //timerId已经存在则不需要在创建，并把当前的timerId停掉，4、多图动画时，每个pic都需要动起来，因此需要给每个pic怎加自己的定时器，所以增加自己的属性element.timerId
                clearInterval(element.timerId);
                element.timerId=null;
             }
             element.timerId=setInterval(function () {  
                current=element.offsetLeft;
                // element.style.left=current+step+'px';
                
                //5、当从400-800时候，没有动画，时直接跳转的，正常情况应该是，逐次递减步长step,即-10               
                if(current>target){
                     step = - Math.abs(step) ;  //避免负负得正，直接去绝对值，在加负号，最后获取的永远都是负
                }

                //判断图片到一定位置，停止
                //6、当图片最后停在目标值附近的时候，可以直接设置为目标值
                if(Math.abs(current-target)<Math.abs(step)) {
                    //停止计时器，记得写在计时器里面，否则没效果
                    clearInterval(element.timerId);
                    //避免大于800，重新设置为800px
                    element.style.left=target+'px';
                    //退出函数
                    return;
                }
                //pic移动               
                current+=step;
                element.style.left=current+'px';
            },30);

        }
    </script>