博客园  :: 联系 :: 管理

大幅顶部广告效果

Posted on 2009-03-13 15:27  独孤雁  阅读(194)  评论(0编辑  收藏  举报

<!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>