前情提要:Javascript 移动的海绵宝宝
这个海绵宝宝是匀速运动、突然停下来的,有点不合理。现实中我们跑步都是速度慢慢减小到0。
要实现这个效果,就必须速度逐渐减小,本质上是盒子的步长逐渐减小。
step = (targetLocation - nowLocation)/num
其中目标位置不变,当前位置却在不断增大,num是一个定值,因此步长会逐渐减小。
但是试想一下,如targetLocation和nowLocation都是整数,num也是,step极可能出现小数,这样if(nowLocation==targetLocation)的判断就永远也不会满足
因此步长需要进行取整,向上还是向下?如果向下,假设step计算结果是0.8,那么算作0,这样存在永远抵达不了目标的可能,因此必须是向上取整,即利用Math.ceil()函数
关键代码如下
function moveRight(obj) {clearInterval(obj.timer);obj.inter = setInterval(callback,50);function callback() {var step = (1520 - obj.clientWidth - obj.offsetLeft) / 100;var intStep = Math.ceil(step);if (1520 - obj.clientWidth == obj.offsetLeft) clearInterval(obj.inter);//判断条件换成intStep==0也可obj.style.left = obj.offsetLeft + intStep + 'px';}}moveRight(div);
wait a minute! 这里是步长大于0前进的情况,所以向上取整,如果是后退,则应该使用Math.floor()向下取整。