为什么当我快速在盒子之间移动的时候，div盒子的宽度会无限长，移出会变为0
qq_晴雨云_0
2019-09-22 11:02
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];
}
}
2回答
-
- weibo__绻绻__0
- 2020-01-20 13:08:31
代码如下：
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)
}
-
- weibo__绻绻__0
- 2020-01-20 13:06:35
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) }
JS动画效果
113925 学习 · 1443 问题
相似问题