物体运动具备条件
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>