仿中关村在线首页弹出式广告插件(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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
3种js实现string的substring方法
Nov 09 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
js里面的变量范围分享
Jul 18 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函数)
2006/10/09 PHP
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
给php新手谈谈我的学习心得
2007/02/25 PHP
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
js的一些常用方法小结
2011/06/29 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
Vue CLI 3.x 自动部署项目至服务器的方法
2019/04/02 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
vue实现打地鼠小游戏
2020/08/21 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python中 * 的用法详解
2019/07/10 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
学校门卫岗位职责
2014/03/16 职场文书
国际贸易实训报告
2014/11/05 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
python tkinter模块的简单使用
2021/04/07 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android