<!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"> /*设置广告和正文的CSS样式*/ body{ padding:0px; margin:0 auto; } #art0{ margin:0 auto; text-align:center; height:300px; padding:10px; width:auto; background-color: yellow; } #artCont{ background:yellowgreen; height:30px; text-align:center; line-height:30px; width:800px; margin:0 auto; } </style> <script type="text/javascript"> //增加广告宽度函数 var w =0; function addW(){ if (w<800){ w +=10; document.getElementById("art0").width=w + "px"; } else{ return; } setTimeout("addW()",40); } function closeW(){ //减少广告宽度函数 if(w>0){ w-=10; document.getElementById("art0").width=w +"px"; } else{ document.getElementById("art0").style.display="none"; return; } setTimeout("closeW()",30); } document.onload = function (){ addW(); setTimeout("closeW()",5000); //在网页加载完毕时，调用增加宽度函数，等待5秒钟后调用减少宽度函数。 } </script></head><body><!--广告和正文的HTML代码--><div id="art0"> <h1>欢迎来到慕课网！</h1> <h3>大幅广告</h3></div><div id="artCont"> 慕课网欢迎你!</div></body></html>
添加回答
举报
0/150
提交
取消