JavaScript-231：简单动画函数封装

93 阅读 0 评论 62 点赞

我是靠谱客的博主俊逸萝莉，这篇文章主要介绍JavaScript-231：简单动画函数封装，现在分享给大家，希望可以做个参考。

效果图

在这里插入图片描述

结构

复制代码

1
2
3
    <div></div>
   <span></span>

CSS

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 100px;
            background-color: red;
            width: 100px;
            height: 100px;
        }

js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        // 简单动画函数封装obj目标对象 target 目标位置
        function animate (obj, target)
        {
            var timer = setInterval(function ()
            {
                if (obj.offsetLeft >= target)
                {
                    // 停止动画 本质是停止定时器
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 + 'px';
            }, 30)
        }
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        animate(div, 300);
        animate(span, 300);