js使用定时器setInterval实现自动平移动画

是个乌龟啊

已于 2022-03-15 20:04:22 修改

阅读量582

点赞数 1

分类专栏： js 文章标签： javascript 动画 css

于 2022-03-15 19:59:03 首次发布

本文链接：https://blog.csdn.net/weixin_56726579/article/details/123510614

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

样式

 <style>
        .box {
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: pink;
            left: 0;
            top: 0;
        }
    </style>

<body>
    <div class="box"></div>
    <script>
        // ele表示DOM，target表示目标位置
        function move(ele, target) {
            typeof ele === 'string' && (ele = document.querySelector(ele))
            let left = ele.offsetLeft;
            // 用定时器实现动画效果
            let t = setInterval(function() {
                left += 10;
                if (left >= target) {
                    left = target;
                    ele.style.left = left + 'px';
                    // 到达指定位置，清除定时器
                    clearInterval(t)
                }
                ele.style.left = left + 'px';
            }, 1000 / 60)
        }
        // 调用函数
        move('.box', 500)
    </script>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是个乌龟啊

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js使用定时器setInterval实现自动平移动画

样式 <style> .box { position: fixed; width: 100px; height: 100px; background-color: pink; left: 0; top: 0; } </style>js<body> <div cl
复制链接

扫一扫