<!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 type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; height: auto; width: 960px; display:block; margin: 0 auto; padding: 5px; text-align: center; } .slide { padding: 10px; width: 950px; margin: 0 auto; background: gray; text-align: center; height: 40px; line-height: 40px; color: #fff; } </style> <script type="text/javascript"> var h=0; //增加高度函数addH() function addh() { if(h<300){ h=h+5; document.getElementById('pn').style.height=h+"px"; }else{ return; } setTimeout("addh()",30); } //网页加载完毕时，调用增加高度函数addH()，等待5秒钟后调用减少高度函数subh()。 window.onload=function(){ addh(); setTimeout("subh()",5000); } // 减少高度函数subH() function subh() { if(h>0){ h=h-5; document.getElementById('pn').style.height=h+"px"; }else{ return; document.getElementById('pn').style.display="none"; } setTimeout("subh()",30); } </script></head><body> <div id="pn"> <h1> 欢迎来到慕课网</h1> <h2> 大幅广告</h2> </div> <p class="slide"> 慕课网欢迎你</p></body></html>
添加回答
举报
0/150
提交
取消