首页 > 语言 > JavaScript > 正文

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

2024-05-06 16:08:05
字体:
来源:转载
供稿:网友
仿百度联盟对联广告源代码展示,主要使用现代浏览器都支持的position:fixed属性,并专门针对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(http://www.fuwa.org/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" $(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://www.fuwa.org/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" $(".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>

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选