仿中关村在线首页弹出式广告插件(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 相关文章推荐
JQuery中$之选择器用法介绍
Apr 05 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
Angular实现form自动布局
Jan 28 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
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常用代码
2006/11/23 PHP
form表单action提交的js部分与html部分
2014/01/07 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
Python算法应用实战之栈详解
2017/02/04 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
Django封装交互接口代码
2020/07/12 Python
python实现感知机模型的示例
2020/09/30 Python
python实现一个简单RPC框架的示例
2020/10/28 Python
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
2013/01/07 HTML / CSS
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
会议邀请函范文
2014/01/09 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
档案工作个人总结
2015/03/03 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL