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

为什么当我快速在盒子之间移动的时候，div盒子的宽度会无限长，移出会变为0

window.onload=function(){

var aDiv=document.getElementsByTagName('div');

for(i=0;i<aDiv.length;i++){

aDiv[i].timer=null;

aDiv[i].onmouseover=function(){

startmove(this,400);

}

aDiv[i].onmouseout=function(){

startmove(this,100);

}

function startmove(obj,iTarget){

clearInterval(obj.timer);

var speed=(iTarget-parseInt(getStyle(obj,'width')))/10;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

obj.timer=setInterval(function(){

if(parseInt(getStyle(obj,'width'))==iTarget){

clearInterval(obj.timer);

}else{

obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';

}

},30)

}

function getStyle(obj,attr){

if(obj.currentStyle){//currentStyle针对IE浏览器

return obj.currentStyle[attr];

}else{

//getComputedStyle针对火狐浏览器

return getComputedStyle(obj,false)[attr];

}

qq_晴雨云_0

2019-09-22

源自：JS动画效果 4-1

关注问题我要回答

1009

操作

收起

2 回答

weibo__绻绻__0
2020-01-20

代码如下：

function startmove(obj, iTarget) {

clearInterval(obj.timer);

obj.timer = setInterval(function () {

var speed = (iTarget - parseInt(getStyle(obj, 'width'))) / 10;

speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

if (parseInt(getStyle(obj, 'width')) == iTarget) {

clearInterval(obj.timer);

} else {

obj.style.width = parseInt(getStyle(obj, 'width')) + speed + 'px';

}

}, 30)

}

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

收起回答

weibo__绻绻__0
2020-01-20

var speed = (iTarget - parseInt(getStyle(obj, 'width'))) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

这两句要放在obj.timer = setInterval(function () {里面，代码如下：

function startmove(obj, iTarget) {        clearInterval(obj.timer);        obj.timer = setInterval(function () {            var speed = (iTarget - parseInt(getStyle(obj, 'width'))) / 10;            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);            if (parseInt(getStyle(obj, 'width')) == iTarget) {                clearInterval(obj.timer);            } else {                obj.style.width = parseInt(getStyle(obj, 'width')) + speed + 'px';            }        }, 30)    }