點擊左箭頭讓圖片主體緩緩滑出，這個實現了，沒有問題。然后再點擊右箭頭讓圖片緩緩收回去，本來很簡單，仔細檢查代碼也沒有問題，怎么就是收不回去還不斷顫抖？就幾行代碼，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>
就加了一個setInterval( )計時器讓圖片緩緩收起，怎么會 出現了顫抖效果？
Tang小溪
2016-08-20 19:43:00