仿中关村在线首页弹出式广告插件(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 Date自定义函数 延迟脚本执行
Mar 10 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
微信小程序实现多选删除列表数据功能示例
Jan 15 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使用PDO方法详解
2014/12/27 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
详解vue父子组件关于模态框状态的绑定方案
2019/06/05 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python format 格式化输出方法
2018/07/16 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
如何基于python实现归一化处理
2020/01/20 Python
python常用运维脚本实例小结
2020/02/14 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
Weblogc domain问题
2014/01/27 面试题
25道Java面试题集合
2013/05/21 面试题
市场营销个人求职信范文
2014/02/02 职场文书
节约用水标语
2014/06/11 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
党小组推荐意见
2015/06/02 职场文书
初中家长意见
2015/06/03 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript