<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#adcon,#adcur{
margin:0;
padding:0;
}
#ad{
display:none;
position:relative;
overflow:hidden;
}
#ad,#content{
width:960px;
margin:0 auto;
}
#adcur{
display:none;
}
#colse{
position:absolute;
top:0;
right:0;
text-align:center;
display:inline-block;
width:20px;
height:20px;
background:#ccc;
display:none;
cursor:pointer;
}
</style>
</head>
<body>
<div id="ad">
<img id="adcon" src="img/ad.png" width='960' height='385'>
<img id="adcur" src="img/cur.png" width='960' height='75'>
<span id="colse">X</span>
</div>
<div id='content'><img src="img/数字商品-10-23.jpg" ></div>
<script>
window.onload=function(){
var Ad =document.getElementById('ad');
var Adcon=document.getElementById('adcon');
var Adcur=document.getElementById('adcur');
var Close=document.getElementById('close');
var h=0;
var maxH=Adcon.height;
var minH=Adcur.height;
function addown(){
if(h<maxH){
h+=5;
Adcon.style.height=h+'px';
Adcon.style.display='block';
setTimeout(addown,50);
}else{
Adcon.style.height=h+'px';
Adcon.style.display='block';
setTimeout(adUp,3000);
}
}
setTimeout(addown,3000);
function adUp(){
if(h>minH){
h-=5;
Adcon.style.height=h+'px';
setTimout(adUp,50);
if(h==minH){
Adcon.style.display='none';
Adcur.style.display='block';
Close.style.display='block';
}
}
}
Close.onclick=function (){
Ad.style.display='none';
}
}
</script>
</body>
</html>
杰杰就是我
慕的地6079101
花易折
慕数据5775487
相关分类