简单动画封装方法

最新推荐文章于 2024-11-07 13:38:59 发布

weixin_62216253

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量368

点赞数

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_62216253/article/details/121439018

版权

       //el：谁要做运动； target：运动到哪； step：运动步长； fn：回调
        var time = null;
       function lineamove(el, target, step, fn) {
            var startLift = el.offsetLeft;
            // 当前位置与目标位置一致则停止不动
            if (startLift == target) {
                return;
            }
            // 判断step的正负
            step = target > startLift ? Math.abs(step) : -1 * Math.abs(step);
            // 停止定时器
            clearInterval(time);
            time = setInterval(function() {
                // 获取当前的Left
                var currentLeft = el.offsetLeft;
                // 增加步长
                currentLeft += step;
                // 赋值
                el.style.left = currentLeft + 'px';
                // 做差
                var cha = target - currentLeft;
                // 判断定时器是否停止
                if (Math.abs(cha) < Math.abs(step)) {
                    el.style.left = target + 'px';
                    clearInterval(time);
                    // 回调
                    if (fn) {
                        fn();
                    }
                }
            }, 16.7)
        }