                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

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

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);
}

OneMagic

2017-05-07

源自：JS动画效果 2-1

关注问题我要回答

562

操作

收起

4 回答

hou110 回答被采纳 +3 积分
2017-05-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用来表示开始还是停止，这个可以通过其他条件判断，我这样就是图方便。

0 回复有任何疑惑可以回复我~

收起回答

OneMagic 提问者

我明天用电脑看看谢谢你

2017-05-08 回复有任何疑惑可以回复我~

Fayyiiii
2017-05-17

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

0 回复有任何疑惑可以回复我~

收起回答