关于js缓冲运动函数

function startMove(iTarget){

var oDiv = document.getElementById('div1');  
clearInterval(timer);  

timer = setInterval(function(){  
    var iSpeed = (iTarget - oDiv.offsetLeft) / 8;  
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  

    //    这是网上的运动函数,此处的停止运动判断,在有些情况下根本不会成立啊,因为速度值很可能直接跳过了目标值
    //    然后一直执行下去啊
    if(oDiv.offsetLeft == iTarget){  
        clearInterval(timer);  
    }else{  
        oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';  
    }  

},230);  

}

请问怎么解决?
如果直接将条件改写为 oDiv.offsetLeft >= iTarget ,可是这样的话,如果目标值是反向,也就是负值,不就完蛋了?

阅读 3.7k
1 个回答

根据楼主的提示:

补充如下:我是这样理解的,

首先说明,缓冲函数的基本原理就是起始点和目标点距离越远的话速度越快,反之...
下面请看: 主要就是这两句话

var iSpeed = (iTarget - oDiv.offsetLeft) / 8;  
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  

原理主要是这两句话:第一句是 取得每次作用的值,由公式可以看出iSpeed每次的值由于除以一个大于1的数字,所以就保证了每次运动后的点不会超过目标点;
在临近目标点的时候,iSpeed会小于1,由第二句话取整为1,这时候oDiv就是以1px为单位运动到目标点,与目标点就会完美的切合(因为,js中不会识别小数点以后的单位);
至于第二句判断iSpeed正负的三目则是为了适应运动的形式为:起始点大于目标点的情形;

嗯,就是这样,
楼主你提到的目标点的是设置iSpeed的值必须为 到目标点的距离的整除才可以,那个问题可以通过iSpeed 先判断 最后赋值来解决,和这个问题还是有些差别

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题