仿百度聯(lián)盟對(duì)聯(lián)廣告實(shí)現(xiàn)代碼
更新時(shí)間:2014年08月30日 13:05:37 投稿:mdxy-dxy
仿百度聯(lián)盟對(duì)聯(lián)廣告源代碼展示,主要使用現(xiàn)代瀏覽器都支持的position:fixed屬性,并專(zhuān)門(mén)針對(duì)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 () { //針對(duì)ie6,模擬position:fixed效果 if ($.browser.msie && parseInt($.browser.version) == 6) { scrollAd("floatAd"); } }) </script>
我們還可以改下代碼,實(shí)現(xiàn)“單邊展示飄浮廣告,多個(gè)廣告輪播展示”的效果,更改后的源代碼:
<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(); }) /*隔時(shí)切換飄浮廣告*/ 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 () { //針對(duì)ie6,模擬position:fixed效果 if ($.browser.msie && parseInt($.browser.version) == 6) { scrollAd("floatAd"); } //執(zhí)行定時(shí)切換圖片廣告 changePic("floatAd",2);//每隔2秒切換一次廣告圖片展示,間隔時(shí)間可控 }) </script>
相關(guān)文章
關(guān)于圖片驗(yàn)證碼設(shè)計(jì)的思考
關(guān)于圖片驗(yàn)證碼設(shè)計(jì)的思考...2007-01-01javascript 定時(shí)廣告顯示(兩個(gè)時(shí)間段)
今天又朋友問(wèn)我那個(gè)定時(shí)廣告,就是有一些廣告需要控制一下時(shí)間,在這一段時(shí)間內(nèi)廣告才可以顯示,下面是具體的代碼。2009-08-08突破winxp sp2/win2003 sp2超強(qiáng)彈窗代碼
超強(qiáng)彈出代碼,廣告聯(lián)盟專(zhuān)用的代碼2008-09-09javascript實(shí)現(xiàn)的多條新聞公告系統(tǒng)
javascript實(shí)現(xiàn)的多條新聞公告系統(tǒng)...2007-08-08