动画函数封装

最新推荐文章于 2024-09-14 19:44:09 发布

不是你的波

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量75

点赞数

分类专栏： JS基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_69317131/article/details/124572025

版权

JS基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个用于创建动画效果的JavaScript函数，通过设置定时器逐步改变元素的位置，实现平滑移动效果。文章详细讲解了如何调用这个函数，并在网页中将一个div元素从初始位置平移到指定坐标300像素。该函数的实现涉及到DOM操作和事件处理，对于前端开发者了解和掌握JavaScript动画原理有所帮助。

摘要由CSDN通过智能技术生成

<div></div>
    <script>
        //封装函数
        function animate(obj, target) { //添加两个参数  obj和target
            //添加定时器
            var timer = setInterval(function() {
                if (obj.offsetLeft >= target) {
                    //添加停止定时器，让盒子停下来
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 100)
        }
        //获取元素
        var div = document.querySelector('div');
        //调用函数
        animate(div, 300)
    </script>