核心原理:通过定时器setlnterval()不断移动盒子位置
实现步骤:
1.获得盒子当前位置
2.让盒子在当前位置加上1个移动的距离
3.利用定时器不断重复这个操作
4.加上一个结束定时器的条件
5.注意此元素需要添加定位,才能使用element.style.left
<body>
<div></div>
</body>
<script>
// 动画原理
// 1.获得盒子当前位置
// 2.让盒子在当前位置加上1个移动的距离
// 3.利用定时器不断重复这个操作
// 4.加上一个结束定时器的条件
// 5.注意此元素需要添加定位,才能使用element.style.left
var div = document.querySelector("div");
var timer = setInterval(function () {
if (div.offsetLeft >= 1500) {
//到1500px的时候就停下
// 停止动画 本质是停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + "px";
}, 30);
</script>