欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

仿百度聯(lián)盟對聯(lián)廣告實現(xiàn)代碼

 更新時間:2014年08月30日 13:05:37   投稿:mdxy-dxy  
仿百度聯(lián)盟對聯(lián)廣告源代碼展示,主要使用現(xiàn)代瀏覽器都支持的position:fixed屬性,并專門針對ie6做了最大限度的兼容性處理

源碼如下:

<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px; _position:absolute; background:url(//img.jbzj.com/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
.flAd{left:0;}
.frAd{right:0;}
</style>
<div class="floatAd flAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第1張圖"></a>
<span class="closeAd"></span>
</div>
<div class="floatAd frAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第2張圖"></a>
<span class="closeAd"></span>
</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(this).parent(".floatAd").hide();
})
/*for ie6*/
function scrollAd(obj) {
	var obj = "." + obj;
	var adTop = $(".floatAd").offset().top;
	//alert(adTop);
	$(window).scroll(function () {
		$(".floatAd").css({
			top : $(window).scrollTop() + adTop
		})
	})
}
$(function () {
	//針對ie6,模擬position:fixed效果
	if ($.browser.msie && parseInt($.browser.version) == 6) {
		scrollAd("floatAd");
	}
})
</script>

我們還可以改下代碼,實現(xiàn)“單邊展示飄浮廣告,多個廣告輪播展示”的效果,更改后的源代碼:

<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px;right:0; _position:absolute; background:url(//img.jbzj.com/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
</style>
<div class="floatAd">
<a href="#" target="_blank"><img src="#" width="120" height="270" alt="第3張圖"></a>
<a href="#" target="_blank" style="display:none;"><img src="#" width="120" height="270" alt="第4張圖"></a>
<span class="closeAd"></span>
</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(".floatAd").hide();
})
/*隔時切換飄浮廣告*/
function changePic(obj,times){
	var num=0,
		obj =$("." + obj+" >a"),
		times=times*1000,
		len=obj.length;
	//alert(len);
	setInterval(function(){
		num++;
		num=num>len-1?0:num;//console.log(num);
		$(obj).eq(num).show().siblings("a").hide();
		},times)
	}
/*for ie6*/
function scrollAd(obj) {
	var obj = "." + obj;
	var adTop = $(".floatAd").offset().top;
	//alert(adTop);
	$(window).scroll(function () {
		$(".floatAd").css({
			top : $(window).scrollTop() + adTop
		})
	})
}
$(function () {
	//針對ie6,模擬position:fixed效果
	if ($.browser.msie && parseInt($.browser.version) == 6) {
		scrollAd("floatAd");
	}
	//執(zhí)行定時切換圖片廣告
	changePic("floatAd",2);//每隔2秒切換一次廣告圖片展示,間隔時間可控
})
</script>

相關(guān)文章

最新評論