动画原理

核心原理：通过定时器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 @   罗砂  阅读(36)  评论(0)  编辑  收藏  举报
相关博文：
· 移动端拖动元素
· 2D转换 动画效果
· 动画实现原理
· 动画函数封装
· JavaScript动画的原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae