為什么當(dāng)我快速在盒子之間移動的時候,div盒子的寬度會無限長,移出會變?yōu)?
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];
}
}
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)
????}
2020-01-20
var?speed?=?(iTarget?-?parseInt(getStyle(obj,?'width')))?/?10;? ? ? ? speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
這兩句要放在obj.timer?=?setInterval(function?()?{里面,代碼如下: