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

源码如下：

<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.jb51.net/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.jb51.net/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>