仿中关村在线首页弹出式广告插件(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字符串插入、删除、替换函数使用示例
Jul 25 Javascript
悬浮数字的实现案例
Feb 19 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
Angular4 反向代理Details实践
May 30 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
vue实现简单的登录弹出框
Oct 26 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缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
[JS]点出统计器
2020/10/11 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
保证JavaScript和Asp、Php等后端程序间传值编码统一
2009/04/17 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
会计与审计专业大专生求职信
2013/10/03 职场文书
酒店员工检讨书
2014/02/18 职场文书
个人党性锻炼总结
2015/03/05 职场文书
考勤制度通知
2015/04/25 职场文书
报案材料怎么写
2015/05/25 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技