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


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 相关文章推荐
Javascript中的String对象详谈
Mar 03 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
深入理解vue中slot与slot-scope的具体使用
Jan 26 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 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+mysql分页代码详解
2008/03/27 PHP
PHP ajax 分页类代码
2008/11/13 PHP
PHP curl使用实例
2015/07/02 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
用 JSON 处理缓存
2007/04/27 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
接口可以包含哪些成员
2012/09/30 面试题
大学生求职自荐信
2013/12/12 职场文书
学校安全检查制度
2014/01/27 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android