这里是一个广告位的Jquery的代码,有两个不同的广告位,一个是中间浮动显示的,显示5秒后自动消失,并限定每天仅出现一次(Cookie实现):
//=====================广告位的js=====================
$(document).ready(function(){
//广告位中心浮动 5秒后自动消失或者点击关闭
$("#bannerFloatCenter").css("left",($(document).width()-250)/2) ;
//根据cookie来判断是否要显示中心区广告:
if(!isSetCookie()){
$("#bannerFloatCenter").fadeIn(2000,function(){
window.setTimeout('$("#bannerFloatCenter").slideUp(1000);',5000);
});
$("#bannerFloatCenter span").click(function(){
$("#bannerFloatCenter").slideUp(1000);
});
} // 广告位右栏浮动 随滚动条滚动而上下移动,可以点击关闭消失
$(window).scroll(function() {
var offsetTop = 130 + $(window).scrollTop() + "px";
$("#bannerFloatFlowScroll").animate({ top: offsetTop }, { duration: 300, queue: false })
});
$("#bannerFloatFlowScroll span").click(function(){
$("#bannerFloatFlowScroll").slideUp();
});
});
下面是两个广告位的Div:
<!-- 广告位中心浮动 5秒后自动消失或者点击关闭消失 -->
<div id="bannerFloatCenter" style="position:absolute;z-index:2;left:483px; top:275px; border:#9DCE63 4px solid; display:none;">
<a href="http://www.cntronics.com/public/lecture/list?cid=7"><img id="onsemi_1" src="<?php echo $this->baseUrl();?>/images/semiwelcomebanner_250.jpg"/></a>
<span title="关闭" style="position:absolute; cursor:pointer;left:213px;top:-17px;font-size:12px;">[关闭]</span>
</div>
<!-- 广告位右栏浮动 随滚动条滚动而上下移动,可以点击关闭消失-->
<div id="bannerFloatFlowScroll" style="position:absolute; z-index:2; right:50px;top:133px;">
<a href="http://www.cntronics.com/public/whitepaper/index/sp/22"><img id="onsemi_2" src="<?php echo $this->baseUrl();?>/images/semisidebanner_120.jpg"/></a>
<span title="关闭" style="position:absolute; cursor:pointer;left:80px;top:-14px;font-size:12px;">[关闭]</span>
</div>
还有一种写法是把setTimeout()函数放出来:
<script language="javascript">
function reloadNewQuestion(){
//jquery code
var no = Math.random();
var url = "<?php echo $this->baseUrl();?>/webinar/index/newquestion/no/"+no;
$(".content.content_1 ul").load(url);
setTimeout("reloadNewQuestion()",60000);
}
</script> <script language="javascript">
$(document).ready(){
reloadNewQuestion();
}
</script>