仿中关村在线首页弹出式广告插件(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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
Jan 15 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
JS实现随机点名器
Apr 12 Javascript
js实现滑动滑块验证登录
Jul 24 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 ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
如何获得EntityManager
2014/02/09 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
考试退步检讨书
2014/01/15 职场文书
小学数学课后反思
2014/04/23 职场文书
文明礼貌演讲稿
2014/05/12 职场文书
五四青年节的活动方案
2014/08/20 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
师德师风个人整改措施
2014/10/27 职场文书
社会实践活动总结格式
2015/05/11 职场文书
高中语文教学反思范文
2016/02/16 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫