js 简单动画

最新推荐文章于 2022-03-04 23:45:43 发布

黄大仙No.1

最新推荐文章于 2022-03-04 23:45:43 发布

阅读量137

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107885878

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var div = document.querySelector('div');
    //获取元素当前位置，并让盒子在当前位置加上1个距离
    div.style.left = div.offsetLeft + 1 + 'px';
    //利用定时器不断重复上述操作
    var timer = setInterval(function () {
        if (div.offsetLeft >= 400) {
            //停止
            clearInterval(timer);
        }
        div.style.left = div.offsetLeft + 1 + 'px';
    }, 3)
</script>
</body>
</html>

封装到函数中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
<div></div>
<span>高瑶</span>
<script>
    function animate(obj, target) {
        var timer = setInterval(function () {
            if (obj.offsetLeft >= target) {
                //停止
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 5 + 'px';
        }, 30);
    }

    var div = document.querySelector('div');
    var span = document.querySelector('span');
    /*//获取元素当前位置，并让盒子在当前位置加上1个距离
    div.style.left = div.offsetLeft + 1 + 'px';
    //利用定时器不断重复上述操作*/
    animate(div, 300);
    animate(span, 200);
</script>
</body>
</html>

优化函数后

function animate(obj, target) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            if (obj.offsetLeft >= target) {
                //停止
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + 5 + 'px';
        }, 30);
    }

在这里插入图片描述

黄大仙No.1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 简单动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: absolute; left: 0; width: 100px; heig.
复制链接

扫一扫

专栏目录