效果:
思路:
利用setInerval()计时器,进行运动。然后关键的一点是在最后停止的时候给它一个填充缝隙的判断。
代码:
代码如下:
function move(end) {
var oDiv = document.getElementById('div1');
var timer = null;
timer = setInterval(function () {
var speed = (end - oDiv.offsetLeft) / 5; //根据终点和offsetLeft取出运动的速度
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //进位取整,小数位变为整位,
// if (oDiv.offsetLeft <= end) {
// clearInterval(timer);
// }
// else {
// oDiv.style.left = oDiv.offsetLeft + speed + 'px';
// }
if (Math.abs(end - oDiv.offsetLeft) <= speed) { //由于在停止的时候最后会出现小的缝隙,或者说没有完全的到达指定地点,所以要小于它的速度
clearInterval(timer); //当距离小于速度时,让计时器停止
oDiv.style.left = end + 'px'; //在停止后填充缝隙。
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px'; //移动DIV
}
}, 30)
}
script>
200
500