<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Top AD</title>
<style type="text/css">
body{margin: 0 auto;padding: 0;}
a:focus{outline: none;}
#ad{background: #e8e8e8; 960px; display: none;margin: 0 auto;text-align: center;overflow:hidden;position:relative;}
.slide{ 960px;margin: 0 auto;background: gray;text-align: center;height: 40px;line-height: 40px;color: #fff;}
#colse{30px;height:30px;background-color:#666;color:#fff;position:absolute;top:0;right:0;font-size:
12px;line-height: 30px;}
</style>
</head>
<body>
<div id="ad">
<h1>欢迎来到风行网</h1>
<h2>大幅广告</h2>
<span id="colse">关闭</span>
</div>
<p class="slide">风行网欢迎你</p>
</body>
<script type="text/javascript">
var tim = 0, time = 0, timer = 0, ttl = 30, tt = 5000;
var h = 0, maxH = 200;
var ele = document.getElementById('ad');
if(h < maxH){
ele.style.display = 'block';
h = h + 5;
ele.style.height = h + 'px';
}else{
return;
}
clearTimeout(time);
time = setTimeout(addH, ttl);
}
var ele = document.getElementById('ad');
if(h > 0){
h = h - 5;
ele.style.height = h + 'px';
}else{
ele.style.display = 'none';
}
clearTimeout(tim);
tim = setTimeout(decH, ttl);
}
clearTimeout(time);
clearTimeout(timer);
decH();
}
window.onload = function(){
addH();
var colseBtn = document.getElementById('colse');
colseBtn.onclick = colseFun;
clearTimeout(timer);
timer = setTimeout(decH, tt);
}
</script>
</html>