0
点赞
收藏
分享

微信扫一扫

动画原理

一脸伟人痣 2022-06-16 阅读 56

核心原理:通过定时器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>

 


举报

相关推荐

0 条评论