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


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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
使用vue制作滑动标签
Sep 21 Javascript
vue动态设置页面title的方法实例
Aug 23 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 CURL模拟GET及POST函数代码
2010/04/25 PHP
php实现图片缩略图的方法
2016/03/29 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JS查看对象功能代码
2008/04/25 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
详解用js代码触发dom事件的实现方案
2020/06/10 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python 文件操作删除某行的实例
2017/09/04 Python
python分布式编程实现过程解析
2019/11/08 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
实习护士自我鉴定
2013/10/13 职场文书
银行会计财务工作个人的自我评价
2013/10/29 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
离婚协议书范文
2015/01/26 职场文书
小学教师个人总结
2015/02/05 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis