时间:2021-05-25
源码如下:
<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();})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(//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();})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) }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>声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这是百度联盟的广告,这些网站加入百度联盟,通过百度联盟在自己的网内站上投放广告并容获得广告佣金。你是广告主的,可以申请加入推广,则花钱做类似的广告至于条件,正规
3月4日,据消息人士透露,百度联盟将于本月抬高悬浮广告单次点击价格。此前,有部分站长反映百度联盟悬浮广告单价偏低,每次点击不过5分钱。百度联盟的悬浮广告功能于今
本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码。分享给大家供大家参考。具体如下:这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果
本文实例讲述了js实现仿百度瀑布流的方法。分享给大家供大家参考。具体实现方法如下:仿百度图片瀑布流*{margin:0;padding:0;}#containe
本文实例讲述了js实现百度联盟中一款不错的图片切换效果的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:js实现百度联盟中的一个不错的图片切换效