仿百度联盟对联广告实现代码
源码如下：
<styletype="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;}
.floatAda{display:block;}
.floatAdimg{border:none;}
.floatAd.closeAd{width:50px;height:20px;display:block;cursor:pointer;margin:9px00auto;}
.flAd{left:0;}
.frAd{right:0;}
</style>
<divclass="floatAdflAd">
<ahref="#"target="_blank"><imgsrc="#"width="120"height="270"alt="第1张图"></a>
<spanclass="closeAd"></span>
</div>
<divclass="floatAdfrAd">
<ahref="#"target="_blank"><imgsrc="#"width="120"height="270"alt="第2张图"></a>
<spanclass="closeAd"></span>
</div>
<scripttype="text/javascript">
$(".closeAd").click(function(){
$(this).parent(".floatAd").hide();
})
/*forie6*/
functionscrollAd(obj){
varobj="."+obj;
varadTop=$(".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>
我们还可以改下代码，实现“单边展示飘浮广告，多个广告轮播展示”的效果，更改后的源代码：
<styletype="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;}
.floatAda{display:block;}
.floatAdimg{border:none;}
.floatAd.closeAd{width:50px;height:20px;display:block;cursor:pointer;margin:9px00auto;}
</style>
<divclass="floatAd">
<ahref="#"target="_blank"><imgsrc="#"width="120"height="270"alt="第3张图"></a>
<ahref="#"target="_blank"style="display:none;"><imgsrc="#"width="120"height="270"alt="第4张图"></a>
<spanclass="closeAd"></span>
</div>
<scripttype="text/javascript">
$(".closeAd").click(function(){
$(".floatAd").hide();
})
/*隔时切换飘浮广告*/
functionchangePic(obj,times){
varnum=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)
}
/*forie6*/
functionscrollAd(obj){
varobj="."+obj;
varadTop=$(".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>