仿百度联盟对联广告实现代码
更新时间:2014年08月30日 13:05:37 投稿:mdxy-dxy
仿百度联盟对联广告源代码展示,主要使用现代浏览器都支持的position:fixed属性,并专门针对ie6做了最大限度的兼容性处理
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
源码如下:
<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(https://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="http://9i0i.com/pic.php?p=#" width="120" height="270" alt="第1张图"></a> <span class="closeAd"></span> </div> <div class="floatAd frAd"> <a href="#" target="_blank"><img src="http://9i0i.com/pic.php?p=#" 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(https://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="http://9i0i.com/pic.php?p=#" width="120" height="270" alt="第3张图"></a> <a href="#" target="_blank" style="display:none;"><img src="http://9i0i.com/pic.php?p=#" 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>
相关文章
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Javascript 超级弹窗代码 24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码2010-06-06
最新评论