为什么速度值只能是目标值的倍数如果不是则就停不下来了-慕课网

为什么速度值只能是目标值的倍数如果不是则就停不下来了

来源：2-1 JS速度动画

OneMagic

2017-05-07 19:59

window.onload = function () {
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function () {
startMove(7,0);
}
oDiv.onmouseout = function () {
startMove(-10,-200);
}
}

var timer = null;
// 传参数的方法
function startMove(speed,iTarget) {
var oDiv = document.getElementById('div1');
// 防止多次启用定时器
clearInterval(timer);
// 添加一个定时器
timer = setInterval(function () {
// 判断目标值
if (oDiv.offsetLeft === iTarget) {
clearInterval(timer);
} else {
// 给当前位置的值加10
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
}, 30);
}

写回答关注

4回答

hou110

2017-05-08 22:27:08

已采纳
回复 OneMagic：
if(flag == "start"){
if(oPanle.offsetLeft+oSpeed>=itarget){
oPanle.style.left = itarget+'px';
clearInterval(timer);
}else{
oPanle.style.left = oPanle.offsetLeft+oSpeed+'px';
}
}else if(flag == "stop"){
if(oPanle.offsetLeft+oSpeed<=itarget){
oPanle.style.left = itarget+'px';
clearInterval(timer);
}else{
oPanle.style.left = oPanle.offsetLeft+oSpeed+'px';
}
}
我在方法中加了一个flag用来表示开始还是停止，这个可以通过其他条件判断，我这样就是图方便。
1 0

OneMag...

我明天用电脑看看谢谢你

2017-05-08 22:36:22

共 1 条回复 >
Fayyiiii

2017-05-17 14:54:11

你需要把当前位置的oDiv.offsetLeft值与itarget再做一次if判断，以你这个startMove(7,0);参数为例。if（oDiv.offsetLeft>itarget也就是0）{oDiv.offsetLeft=itarget}这样目标就能够停下来了。相反，目标往左边移动也一样，if（oDiv.offsetLeft<target也就是-200）{oDiv.offsetLeft=itarget}目标也停下来了

0 0
Robert_Langdon

2017-05-07 22:27:28

不是倍数肯定停不下来啊，oDiv.offsetLeft = 0 才能停下来，你每次加7，最后大于0，但不会等于0，所以就不停了啊

0 1
hou110

2017-05-07 20:27:18

你可以console.log(oDiv.offsetLeft)这个值看一下。当你值不是倍数的时候，它是跳过iTarget这个的，所以用==来判断目标值是有bug的。
有一个解决方法就是判断oDiv.offsetLeft+oSpeed>=itarget，这个时候可以将itarget赋值给left。
oDiv.style.left = itarget+'px';

2 0

OneMag...

如果做这个判断的话oDiv.offsetLeft+speed>=itarget 鼠标移开的递减就不行了就不会缩回去了。你能贴下你解决BUG的代码出来我看看吗谢谢

2017-05-07 20:48:47

共 2 条回复 >