点击左箭头让图片主体缓缓滑出，这个实现了，没有问题。然后再点击右箭头让图片缓缓收回去，本来很简单，仔细检查代码也没有问题，怎么就是收不回去还不断颤抖？就几行代码，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>
添加回答
举报
0/150
提交
取消