前端案例-20 左右移动的盒子，封装，回调函数，缓动效果

最新推荐文章于 2023-02-27 09:20:45 发布

KathyLJQ

最新推荐文章于 2023-02-27 09:20:45 发布

阅读量208

点赞数

分类专栏：前端案例

本文链接：https://blog.csdn.net/KathyLJQ/article/details/115797483

版权

前端案例专栏收录该内容

32 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            top: 50px;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: darksalmon;
        }
    </style>
</head>

<body>
    <button>回到原点</button>
    <button>向前走</button>
    <div></div>

</body>
<script>
    var btn1 = document.querySelector('button:first-child');
    var btn2 = document.querySelector('button:nth-child(2)');
    var d = document.querySelector('div');

    function animateForward(el, w, callback) {
        clearInterval(el.timer);
        var step = null;
        el.timer = setInterval(function() {
            step = Math.ceil((w - el.offsetLeft) / 10);
            el.style.left = el.offsetLeft + step + 'px';
            console.log(el.offsetLeft);
            if (el.offsetLeft >= w) {
                clearInterval(el.timer);
                if (callback) {
                    callback();
                }

            }
        }, 100)
    }

    function animateBack(el, w, callback) {
        clearInterval(el.timer);
        var step = null;
        el.timer = setInterval(function() {
            step = Math.floor((w - el.offsetLeft) / 10);
            el.style.left = el.offsetLeft + step + 'px';
            console.log(el.offsetLeft);
            if (el.offsetLeft <= w) {
                clearInterval(el.timer);
                if (callback) {
                    callback();
                }

            }
        }, 100)
    }

    btn1.addEventListener('click', function() {
        console.log("btn1 clicked");
        animateBack(d, 0, function() {
            d.style.backgroundColor = "blue";
        });
    })
    btn2.addEventListener('click', function() {
        console.log("btn2 clicked");

        animateForward(d, 800);
    })
</script>

</html>

KathyLJQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端案例-20 左右移动的盒子，封装，回调函数，缓动效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫

专栏目录