Document
*{
margin: 0;
padding: 0;
}
.box1{
/* 必须加定位才可以动 */
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: blueviolet;
}
// 动画原理：
// 1.获得盒子当前位置
// 2.让盒子在当前位置加上2px 的移动距离
// 3.利用定时器不断重复中国操作
// 4.接触定时器
// 5.注意添加定位，才可以使用element.style.left
var box1 =document.querySelector('.box1') // 获取事件源
var timer = setInterval(function(){
if( box1.offsetLeft >= 500){
clearInterval(timer); // 清除定时器
}else{
// 每50毫秒就将新的值给box1.left
box1.style.left = box1.offsetLeft +2 +'px';
}
},50)
