封装变速动画

最新推荐文章于 2022-12-13 21:10:17 发布

转载最新推荐文章于 2022-12-13 21:10:17 发布 · 56 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Ironman725/p/10920726.html

该博客主要围绕封装变速动画展开。通过编写 JavaScript 代码，封装了一个 `animateBian` 函数，可实现元素的变速移动。函数接收元素和目标位置作为参数，在按钮点击事件中调用该函数，使元素移动到指定位置，如 400px 或 800px 处。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
            position: absolute;
            margin-top: 30px;
            left: 0px;

        }
    </style>
</head>
<body>
<button id="btn1">点击移动到400px</button>
<button id="btn2">点击移动到800px</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
    //封装变速动画
    //@params : 元素  目标位置
    function animateBian(element, target) {
        clearInterval(element.timeId);
        element.timeId = setInterval(function () {
            //获取当前的元素的位置
            var current = element.offsetLeft;
            //设置移动的步数
            var step = (target - current)/10;
            //判断步数 > 0, 则向上取整 ,否则向下取整
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            //获取每次移动后的left值
            current += step;
            element.style.left = current + "px";
            if(current == target){
                clearInterval(element.timeId);
            }
            console.log("目标位置:" + target + ",每次移动的步数" + step +",当前位置:" + current );
        },10)
    }

    my$("btn1").onclick = function () {
        animateBian(my$("box"), 400);
    }
    my$("btn2").onclick = function () {
        animateBian(my$("box"), 800);

    }


</script>
</body>
</html>

转载于:https://www.cnblogs.com/Ironman725/p/10920726.html