JavaScript技巧：让你的网页元素动起来- move函数详解

一、move函数是什么

在JavaScript中，想要使网页元素动起来，我们通常会选择使用css动画或者jQuery调用animate()函数等方法。但是，这些方法的功能相对来说是局限的。而move函数则是一种自己编写的移动动画函数，它可以实现元素的平滑移动，并且可以设定移动速度、移动方向以及移动距离等参数。

一般形式如下：

function move(obj, dir, target, speed, callback) {
    clearInterval(obj.timer);
    var current = parseInt(getStyle(obj, dir));
    if (current > target) {
        speed = -speed;
    }
    obj.timer = setInterval(function() {
        var oldValue = parseInt(getStyle(obj, dir));
        var newValue = oldValue + speed;
        if ((speed > 0 && newValue >= target) || (speed < 0 && newValue <= target)) {
            newValue = target;
        }
        obj.style[dir] = newValue + "px";
        if (newValue == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
    }, 30);
}

其中，参数含义如下：

obj：要移动的页面元素
dir：表示要移动的方向，如left、right、top、bottom等
target：表示元素的最终位置
speed：表示移动的速度
callback：表示移动结束后的回调函数（可选）

二、move函数的实现原理

move函数的实现原理类似于一个定时器，实现的大致过程如下：

清除掉之前的定时器防止重复执行
获取元素当前的位置
判断当前位置与目标位置的距离，并确定移动的方向和速度
设定一个定时器，每个一定的时间间隔改变元素的位置
如果元素已经移动到目标位置，清除定时器，执行回调函数

move函数的实现原理比较简单，但需要注意的是，由于JavaScript本身是单线程的，move函数如果执行时间过长，就会阻塞主线程的执行，因此在移动较多元素的时候，可以采用多线程或者其他方式来优化。

三、move函数的使用方法

使用move函数很简单，只需要在JavaScript代码中调用move函数并传入相应的参数即可。下面是一个例子：



    
  
    move函数使用示例
    
    <script type="text/javascript">
        function getStyle(obj, name) {
            if (window.getComputedStyle) {
                return getComputedStyle(obj, null)[name];
            } else {
                return obj.currentStyle[name];
            }
        }

        function move(obj, dir, target, speed, callback) {
            clearInterval(obj.timer);
            var current = parseInt(getStyle(obj, dir));
            if (current > target) {
                speed = -speed;
            }
            obj.timer = setInterval(function() {
                var oldValue = parseInt(getStyle(obj, dir));
                var newValue = oldValue + speed;
                if ((speed > 0 && newValue >= target) || (speed < 0 && newValue <= target)) {
                    newValue = target;
                }
                obj.style[dir] = newValue + "px";
                if (newValue == target) {
                    clearInterval(obj.timer);
                    callback && callback();
                }
            }, 30);
        }

        window.onload = function() {
            var oBox = document.getElementById("box");
            oBox.onclick = function() {
                move(oBox, "left", 200, 20, function() {
                    move(oBox, "top", 200, 20);
                });
            };
        };
    </script>