缓动动画 animate

最新推荐文章于 2023-10-18 19:22:05 发布

鲁_byg

最新推荐文章于 2023-10-18 19:22:05 发布

阅读量708

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_34102108/article/details/50927287

版权

javascript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

var btn = document.getElementById("btn");
var box = document.getElementById("box");
var timer = null;
btn.onclick = function() {
    // 盒子本身的位置 +  步长
   timer = setInterval(function() {
       box.style.left = box.offsetLeft + 5 + "px";  // 核心的动画原理
       console.log(box.offsetLeft);
       // 到了某个地方就应该停止定时器
       if(box.offsetLeft >=400) {  // 知道为什么用 offsetLeft  不带px
           clearInterval(timer);
       }
   },30)
}