// 运动三要素,谁运动,运动属性,运动目标
//ele,{left:1000,top:500,width:300},cb 回调函数
var times = '';
function startMove(ele, targetObj, cb) {
// 设置清空定时器的开关
let onOff = false;
clearInterval(times);
times = setInterval(() => {
// 遍历运动的方向和目标
for (let attr in targetObj) {
// 获取元素实时的位置,计算speed
let tmpPos = parseInt(getPos(ele, attr));
console.log(tmpPos);
let speed = (targetObj[attr] - tmpPos) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 到达目标值,设置开关状态
if (tmpPos + speed == targetObj[attr]) {
onOff = true;
}
// 设置元素运动
ele.style[attr] = tmpPos + 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]
}
}
07-25
198
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)