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


Posted in Javascript onAugust 30, 2014

源码如下:

<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 () {
	//针对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)
	}
/*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>
Javascript 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
深入理解js中this的用法
May 28 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
jQuery针对各类元素操作基础教程
Aug 29 #Javascript
jQuery事件用法实例汇总
Aug 29 #Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 #Javascript
jQuery动画特效实例教程
Aug 29 #Javascript
jQuery实用函数用法总结
Aug 29 #Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 #Javascript
原生javascript实现的分页插件pagenav
Aug 28 #Javascript
You might like
php判断ip黑名单程序代码实例
2014/02/24 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
JavaScript 常用函数
2009/12/30 Javascript
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
使用Python自动化破解自定义字体混淆信息的方法实例
2019/02/13 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
python中pyqtgraph知识点总结
2021/01/26 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
AJAX的全称是什么
2012/11/06 面试题
军人违纪检讨书
2014/02/04 职场文书
五型班组建设方案
2014/02/10 职场文书
小学语文业务学习材料
2014/06/02 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
房屋买卖协议样本
2014/11/16 职场文书
电影圆明园观后感
2015/06/03 职场文书
贷款收入证明范本
2015/06/12 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
一文搞懂Java中的注解和反射
2022/06/21 Java/Android