大幅顶部广告效果

<!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; 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; 100%; height:200px; border:solid 1px #000; background-color:#aaa text-align:center;">
        主体内容.cssrain.cn
    </div>

</body>
</html>