就加了一个setInterval( )计时器让图片缓缓收起，怎么会出现了颤抖效果？

点击左箭头让图片主体缓缓滑出，这个实现了，没有问题。

然后再点击右箭头让图片缓缓收回去，本来很简单，仔细检查代码也没有问题，怎么就是收不回去还不断颤抖？

就几行代码，abc和bbc两个函数，一个展开一个收起。

问题出在哪了？效果如下，慕课好像要点击gif才能看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页广告特效——豆瓣音乐</title>
<style>
*{margin:0; padding:0;}
#dbmove{height:50px;  float:left; background-image:url(5.jpg);}
#dbshow{height:50px; width:50px; float:left; background-image:url(6.jpg); display:block;}
#dbhid{height:50px; width:50px; float:left; background-image:url(7.jpg); display:none;}
</style>
<script>
window.onload=function (){
var dbmove=document.getElementById('dbmove');//抓取豆瓣音乐主体
var dbshow=document.getElementById('dbshow');//抓取展开箭头（右箭头）
var dbhid=document.getElementById('dbhid');	//抓取收起箭头（左箭头）

function abc(){//展开时宽度递增，34行此函数被调用
	if(parseInt(dbmove.style.width)<200){//当豆瓣音乐主体宽度小于200，执行宽度递增5
		dbmove.style.width=parseInt(dbmove.style.width)+5+'px';	
		}					
	}
function bbc(){//收起时宽度递减，41行此函数被调用
	if(parseInt(dbmove.style.width)>0){//当豆瓣音乐主体宽度大于0，执行宽度递减5
		dbmove.style.width=parseInt(dbmove.style.width)-5+'px'
		}	
	}
	


dbshow.onclick=function (){//当点击右箭头展开
	dbshow.style.display='none';//右箭头隐藏
	dbhid.style.display='block';//左箭头显示	
	var timer=setInterval(abc,5);//每5毫秒执行函数abc，宽度递增，函数见18行
	
	}

dbhid.onclick=function(){//当点击左箭头收起
	dbshow.style.display='block';//右箭头显示
	dbhid.style.display='none';//左箭头隐藏
	var timer=setInterval(bbc,5);//每5毫秒执行函数bbc，宽度递减，函数见23行
	}	
	
	}


</script>
</head>

<body>
<div>
<div id="dbmove" style="width:0px;"></div>
<div id="dbshow"></div>
<div id="dbhid"></div>
</div>
</body>
</html>

Tang小溪

浏览 1754回答 1

1回答

随时随地看视频慕课网APP

就加了一个setInterval( )计时器让图片缓缓收起，怎么会 出现了颤抖效果？

1回答

就加了一个setInterval( )计时器让图片缓缓收起，怎么会出现了颤抖效果？