js特效匀速动画分装（前期）

最新推荐文章于 2022-04-09 14:43:08 发布

頑張ってちしじょ

最新推荐文章于 2022-04-09 14:43:08 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/weixin_45170547/article/details/90753534

版权

匀速动画分装
具体操作如下

<body>
    <button id="btn">开始</button>
    <div id="box"></div>
    <script>
        window.onload = function () {
            paAnimation('btn', 'box', 20, 799);
        };
        function paAnimation(btnId, boxId, step, toStep) {
            //1.获取需要的标签
            var btn = document.getElementById(btnId);
            var box = document.getElementById(boxId);
            //定义变量
            var timer = null, begin = 0, toStep = 799;
            //2.监听点击事件
            btn.onclick = function () {
                //2.1清除定时器
                clearInterval(timer);
                //2.2设置定时器
                timer = setInterval(function () {
                    //相加
                    begin += step;   //begin = begin + step

                    //判断
                    if (begin >= toStep) {
                        begin = toStep;
                        clearInterval(timer);
                    }
                    box.style.marginLeft = begin + "px";
                }, 200);
            }
        }
    </script>
</body>

注意点