仿中关村在线首页弹出式广告插件(jQuery版)


Posted in Javascript onMay 03, 2012

其的就不多说啦,直接上代码:
jquery 插件:

/* 
疯狂秀才 制作 于 2012-04-24 17:00 
QQ: 1055818239 
email: hxl_apple@163.com 
*/ 
(function($){ 
$.fn.quickAd = function(settings){ 
settings = $.extend({ 
width:760, 
height:400, 
html:'我是广告内容', 
top:130, 
sec:5, //广告显示时长,单位秒 
border:true //显示外框 
},settings); 
var fkxc_ad = 0; 
var bodyWidth = $(window).width(); 
var _adBodyContainerID = "bigAd_"+settings.width; 
var _adCloseContainerID = "bitAdClose_"+settings.width; 
var closeHtml = '广告剩余 <span id="__sec"></span> 秒 <a href="javascript:;" id="__close_ad">关 闭</a>'; 
//广告内容容器 
var _adContent = '<div id="'+_adBodyContainerID+'"></div>'; 
//关闭按钮容器 
var _adCloseBtn = '<div id="'+_adCloseContainerID+'">'+closeHtml+'</div>'; 
var self = $(this); 
$(this).empty().html(_adContent+_adCloseBtn); 
$('#__close_ad').click(function(){ 
window.clearTimeout(fkxc_ad); 
self.fadeOut(); 
}) 
if(settings.border){ 
$('#'+_adBodyContainerID).css('border','1px solid #ccc'); 
} 
$('#'+_adBodyContainerID).empty().html(settings.html).css({ 
'width':settings.width+'px', 
'height':settings.height+'px', 
'position': 'fixed', 
'z-index': 20000, 
'top':settings.top+'px', 
'left':(bodyWidth - settings.width) / 2 + 'px' 
}).fadeIn('fast'); 
$('#'+_adCloseContainerID).css({ 
'width':'160px','height':'18px','line-height':'18px','background-color':'#ccc', 
'text-align': 'center', 'opacity': '0.8','top':settings.top+'px','position': 'fixed', 
'left':((bodyWidth - settings.width) / 2+(settings.width-160)) + 'px', 'z-index': 20001 
}).show(); 
var daojishi = function (s) { 
fkxc_ad = setInterval(function () { 
if (s == 0) { 
self.fadeOut(); 
} 
$("#__sec").text(s); 
s--; 
}, 1000); 
} 
daojishi(settings.sec) 
} 
})(jQuery)

HTML:
<div id="testad"></div> 
<script> 
$(function(){ 
$('#testad').quickAd({ 
html:'<img src="11_523049_88a5614dc705882 (1).jpg" width=760 height=400 />' 
}); 
}) 
</script>

Ok啦!
Javascript 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
jQuery 开发者应该注意的9个错误
May 03 #Javascript
jQuery Ajax请求状态管理器打包
May 03 #Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 #Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 #Javascript
统计jQuery中各字符串出现次数的工具
May 03 #Javascript
JQuery插件Style定制化方法的分析与比较
May 03 #Javascript
拉动滚动条加载数据的jquery代码
May 03 #Javascript
You might like
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
Yii框架form表单用法实例
2014/12/04 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
Javascript动态创建div的方法
2015/02/09 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
解决vue keep-alive 数据更新的问题
2018/09/21 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
Python解惑之True和False详解
2017/04/24 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
什么是类的返射机制
2016/02/06 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
读书活动实施方案
2014/03/10 职场文书
私人委托书格式
2014/09/10 职场文书
九寨沟导游词
2015/02/02 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
法人身份证明书
2015/06/18 职场文书
社区服务活动感想
2015/08/11 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书