JS 封装跑马灯动画函数

最新推荐文章于 2024-01-22 19:19:52 发布

周梦杰

最新推荐文章于 2024-01-22 19:19:52 发布

阅读量202

点赞数

分类专栏：前端 js 文章标签： js

本文链接：https://blog.csdn.net/weixin_43209533/article/details/105706660

版权

js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

动画实现原理

通过定时器 setInterval() 不断移动盒子位置

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div></div>
<script>
    let div=document.querySelector("div");

    // obj 目标对象  target 目标位置
    function animate(obj, target) {
        if(obj.timer) {
            clearInterval(obj.timer)
        }else{
            obj.timer=setInterval(
                function () {
                    if(obj.offsetLeft>=target){
                        clearInterval(obj.timer);
                    }
                    obj.style.left = obj.offsetLeft + 1 + "px";
                },
                30
            );
        }
    }
    animate(div,100);
</script>
</body>
</html>

小结

用 css 也可以实现动画效果。
但是 css 不可重复利用，每次使用动画的时候都要重写。
而 js 可以进行函数的封装，也可以手动调用，比较方便。

周梦杰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 封装跑马灯动画函数

动画实现原理通过定时器 setInterval() 不断移动盒子位置代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ ...
复制链接

扫一扫

专栏目录