缓动动画封装

最新推荐文章于 2022-04-17 16:37:55 发布

mj_leona

最新推荐文章于 2022-04-17 16:37:55 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mj_leona/article/details/79691925

本文介绍了一个使用CSS样式和JavaScript实现元素动画效果的例子。通过两个按钮触发不同目标位置的动画，展示了如何利用定时器逐步改变DOM元素的位置属性，实现平滑过渡效果。

<style>
    *{
        margin: 0;
        padding: 0;
    }

    #box{
        width: 200px;
        height: 200px;
        background-color: darkgoldenrod;
        position: absolute;
        top: 100px;
        left: 0;
    }
</style>

<body>
<button id="btn200">btn200</button>
<button id="btn400">btn400</button>
<div id="box"></div>
</body>

<script>
    var btn200 = document.getElementById("btn200");
    var btn400 = document.getElementById("btn400");
    var box = document.getElementById("box");

    btn200.onclick = function () {
        animate(box,200);
    };
    btn400.onclick = function () {
        animate(box,400);
    };

    function animate(obj,target) {
        clearInterval(obj.timer);     //清除定时器
        obj.timer = setInterval(function () {
            var step = (target-obj.offsetLeft)/10;
            step = step>0? Math.ceil(step): Math.floor(step);
            obj.style.left = obj.offsetLeft + step +"px";
            if (obj.offsetLeft == target){
                clearInterval(obj.timer);
            }
        },30)
    }
</script>