一、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函数使用示例 #box {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: #f00;
}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);
});
};
};原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/309631.html
微信扫一扫 
支付宝扫一扫 