仿中关村在线首页弹出式广告插件(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处理a标签超链接默认事件的方法
Jun 29 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
详解tween.js的使用教程
Sep 14 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
Vue vm.$attrs使用场景详解
Mar 08 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+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
js数组去重的常用方法总结
2014/01/24 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jQuery的remove()方法使用详解
2015/08/11 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
js实现简单的倒计时
2021/01/28 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python中的字典详细介绍
2014/09/18 Python
Python实现的使用telnet登陆聊天室实例
2015/06/17 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
竞职演讲稿范文
2014/01/11 职场文书
校园活动宣传方案
2014/03/28 职场文书
科学发展观标语
2014/10/08 职场文书
银行贷款收入证明
2014/10/17 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2014年文员工作总结
2014/11/18 职场文书
运动会开幕词
2015/01/28 职场文书
社区活动总结范文
2015/05/07 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL