让我来完善下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="pragma" content="no-cache">
<title>展开与收起特效</title>
<style>
body{
margin: 0 auto;
padding: 0px;
}
#pn{
background: #e8e8e8;
width: 950px;
display: block;
margin: 0 auto;
padding: 5px;
height: auto;
text-align: center;
position:relative;
z-index: 1;
overflow: hidden;
}
.content{
margin:0 auto;
padding:10px;
width:950px;
background: gray;
text-align: center;
height:40px;
color:#fff;
position: relative;
z-index:2;
}
</style>
</head>
<body>
<div id="pn">
<h1>欢迎来到英雄联盟</h1>
<h1>大幅广告</h1>
</div>
<div>
敌军还有30S到达战场，碾碎他们
<br>
正文
</div>
<script>
var h = 0;
function addH(){
if(h < 300){
h += 5;
document.getElementById("pn").style.height = h + "px";
} else {
return;
}
setTimeout(addH, 30);
}
function subH(){
if(h > 0){
h -= 5;
document.getElementById("pn").style.height = h + "px";
} else {
document.getElementById("pn").style.display = 'none';
return;
}
setTimeout(subH, 30);
}
window.onload = function(){
addH();
setTimeout(subH, 5000);
}
</script>
</body>
</html>
