<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>大幅广告</title>
<SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"></SCRIPT>
<script type="text/javascript" language="javascript">
$(function(){
//先隐藏,然后用animate ()动态展开.
$('#ads').hide();
$("#ads").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
//控制关闭
$("#closeimg").click(function(){
$("#ads").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
temp=0;//跟计时代码 要联系下.
})
// setTimeout("nonead()",10000); //停留时间自己适当调整
})
//隐藏代码
function nonead()
{
$("#ads").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
}
//广告倒计时代码
var temp=10;
function oJump()
{
temp-=1
$("#myclock").text("10秒广告时间,倒计时："+temp);
if(temp==0)
{
clearTimeout(obj);//如果已经为0,停止执行任务
nonead();//我把隐藏 移到这来了
}
}
var obj=setInterval("oJump()",1000); //每1秒执行一次.
</script>
</head>
<body>
<div id="ads" style="margin:auto; width:100%; top:0px; border:solid 1px #000; background-color:#fafafa; position:relative; overflow:hidden; text-align:center;">
<img src="xin.gif" width="100%" alt="" /><div id="close" style="position:absolute; right:50px; bottom:1px; cursor:hand;font-size:12px;" ><span id="myclock" >10秒广告时间,倒计时：10</span>
<img src='http://online.sccnn.com/icon/185/06.gif' width='100' height='24' border='0' vspace='3' id="closeimg" alt='关闭广告'></div>
</div>
<!-- 主体内容 -->
<div style="margin:auto; width:100%; height:200px; border:solid 1px #000; background-color:#aaa text-align:center;">
主体内容.cssrain.cn
</div>
<table><tr><td style="position:relative">
</td></tr></table>
</body>
</html>
