仿中关村在线首页弹出式广告插件(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 相关文章推荐
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
Aug 02 Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
在Vuex中Mutations修改状态操作
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分页显示制作详细讲解
2006/10/09 PHP
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
XML的代替者----JSON
2007/07/21 Javascript
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
jQuery-mobile事件监听与用法详解
2016/11/23 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
python中遍历文件的3个方法
2014/09/02 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
Python安装OpenCV的示例代码
2020/03/05 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
自荐信的五个重要部分
2013/10/29 职场文书
工作过失检讨书
2014/02/23 职场文书
医学专业大学生求职信
2014/07/12 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
初中家长评语大全
2014/12/26 职场文书
员工离职感谢信
2015/01/22 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Go语言应该什么情况使用指针
2021/07/25 Golang