JS移动元素的代码
程序员文章站
2022-03-13 19:15:53
...
//移动元素的函数
function move(ele,aim,step){
//每次点击执行函数的时候都清除定时器,防止连续点击加快移动速度
//之所以用ele.time是为了不出time undefined的错误
clearInterval(ele.time);
ele.time=setInterval(function() {
//获取当前位置 offsetLeft获得的是数字不带单位
var now = ele.offsetLeft;
//确定每次移动的单位距离step的正负,如果目标距离aim大于当前距离,step为正,反之step为负
//每次执行函数之前将step初始化为正值
step = Math.abs(step);
step = now < aim ? step : -step;
//设置每次执行函数当前得位置都在变化,变化量为step
now += step;
//设置元素的位置,如果正在向目标位置移动,那么Math.abs(now-aim)>Math.abs(step),如果已经在目标位置的地方
//但是不能精确则Math.abs(now-aim)<Math.abs(step),这两种情况的当前位置是不一样的
if (Math.abs(now - aim) > Math.abs(step)) {
ele.style.left = now+'px';
} else if (Math.abs(now - aim) < Math.abs(step)) {
clearInterval(time);
ele.style.left = aim+'px';
}
else if(Math.abs(now - aim) === Math.abs(step)){
ele.style.left = aim+'px';
}
},20);
}
需要的时候只要先引用这个js,然后调用move函数就可以了。其中move函数的三个参数ele,aim,step分别是:要移动的元素、目标位置、每次移动的单位距离。