仿百度联盟对联广告实现代码

<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(http://files./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>

<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(http://files./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");

	}

	//执行定时切换图片广告

	changePic("floatAd",2);//每隔2秒切换一次广告图片展示，间隔时间可控

})

</script>