动画原理

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

 

posted @ 2022-04-18 17:09  罗砂  阅读(45)  评论(0)    收藏  举报