<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>????
<title>頂部廣告展開收起</title>
<style>
body,?div,?img,?span?{?margin:0;?padding:0;?}
#content{?width:960px;?height:1000px;?background:#ccc;?margin:0?auto;?}
#ad{?width:960px;?margin:0?auto;?position:?relative;?overflow:?hidden;?display:none;?}
#close{
????position:absolute;
????width:20px;
height:20px;
text-align:center;
line-height:20px;
background:#CF3;
top:0;
right:0;
display:?none;
cursor:?pointer;
}
</style>
</head>
<body>
<div?id="ad">
<img?id="adcon"?src="http://img1.sycdn.imooc.com//52fdb1ce0001e92d09620386.jpg"?width="960"?height="385"/>
<img?id="adcur"?src="http://img1.sycdn.imooc.com//52fdb21a0001a0eb11990068.jpg"?width="960"?height="80"/>
<span?id="close">X</span>
</div>
<div?id="content"><img?src="http://img1.sycdn.imooc.com//52fdb1930001795a09601700.jpg"?/></div>
<script>
//全局變量
var?oAd?????=?document.getElementById('ad');
var?oAdcon??=?document.getElementById('adcon');
var?oAdcur??=?document.getElementById('adcur');
var?oClose??=?document.getElementById('close');
var?maxH?=oAd.height;//最大高度
var?minH?=oAdcon.height?;//最小高度
var?step?=?5;//移動(dòng)的距離
var?h????=?0;
/*廣告向下展開*/
function?adDown(){
oAd.style.display?=?"block";
oAd.style.height??=?h+"px";
if(?h<maxH?){
?????h+=step????;?//向下移動(dòng)
setTimeout(adDown,100);
}else{
setTimeout(adUp,3000);?//停留時(shí)間自己適當(dāng)調(diào)整?1000?=?1秒
}
}
/*廣告向上收起*/
function?adUp(){
oAd.style.height?=h+"px"?;
??????
if(?h>minH?)?{
?h-=step???;?//向上移動(dòng)
setTimeout(adUp,10);
}else?{
oAdcon.style.display?=?"none";
oClose.style.display?=?"block";
}
}
oClose.onclick?=?function(){
oAd.style.display?=?"none";
}
setTimeout(adDown,?3000);
</script>
</body>
</html>
求大佬幫我看下我看了幾個(gè)小時(shí)了還沒看出怎么不運(yùn)行
qq_12月_0
2016-12-28 18:02:26
