完美运动框架（1） 普通位移运动

物体运动具备条件

​	1，必须是定位（绝对定位，相对定位）

​    2， 改变【top，left】值，实现物体运动

​	3，必须使用【定时器】--使用【setInterval()】

​	4，补充：也可以时间【opacity，border-radius】的属性动画

 	

```javascript
<script>
  btn1.onclick =function(){
    animate(100)
	}
  btn2.onclick =function(){
    animate(300)
	}
//封装运动函数
  function animate(target){ 					//target为目标值
  												//赋值timer用作定时器
    if(window.timer) clearInterval(window.timer);				//先清除一遍
    var num = Math.round(getStyle(box,'left')); //用getStyle函数获取'left'值
     if(target>num){					//如果目标值大于当前值，那就继续累加到目标值
         var step = 7;					//如果目标值小于当前值，当前值就累减回目标值
     }else{
         var step = -7;
     }
      
      
     timer = setInterval(function(){	//设置定时器开始实现运动
         if(num==target){				//如果到达目标值就清除定时器停止运动
             clearInterval(timer);
         }else{
             if(Math.abs(target-num) < Math.abs(step)){  //如果目标点 -  当前位置 （当前位置距离目标点的距离）小于步长的话 = 步长
                 num = target;
                 box.style.left = num +'px' //进行赋值
             }else{
                 num+=step; 				//正常累加
             }
             box.style.left = num+'px';
         }
     },300) 
  }

//获取属性的函数，style中的数值
 function getStyle(oDom,attr){
     if(oDom.currentStyle){
         return parseInt(oDom.currentStyle[attr]);//IE8浏览器
     }else{
         return parseInt(getComputedStyle(oDom,false)[attr]);//
     }
 }
</script>