在JS中元素运动的时候我们需要使用一些运动的操作,在这里我们直接封装一个简单运动函数,在实现元素运动的时候可以直接调用。
//封装运动函数
//cd:回调函数,运动结束后要执行的代码
var times = '';
var onOff = false;
function move(ele, target, cb) {
clearInterval(times);
times = setInterval(function () {
//遍历运动的方向和目标
for (let attr in target) {
// 获取元素属性的实时值
let tmpVal = parseInt(getPos(ele, attr));
//计算speed
let speed = (target[attr] - tmpVal) / 10;
// 取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (tmpVal == target[attr]) {
onOff = true;
}
//赋值给元素,让元素动起来
ele.style[attr] = tmpVal + speed + 'px';
}
//判断开关状态,停止定时器
if (onOff) {
clearInterval(times);
cb && cb();
}
}, 30)
}
//封装获取元素实时位置的函数
function getPos(obj, attr) {
if (obj.currentStyle) { // 获取css的样式
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr]
}
}