仿中关村在线首页弹出式广告插件(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 相关文章推荐
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
详解vue项目打包步骤
Mar 29 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python机器学习之决策树分类详解
2017/12/20 Python
python模拟事件触发机制详解
2018/01/19 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Django使用redis缓存服务器的实现代码示例
2019/04/28 Python
django 消息框架 message使用详解
2019/07/22 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
个人求职简历中英文自我评价
2013/12/16 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
期末学生评语大全
2014/04/24 职场文书
图书馆标语
2014/06/19 职场文书
工作态度检讨书范文
2015/05/06 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
MySQL分区路径子分区再分区
2022/04/13 MySQL