仿中关村在线首页弹出式广告插件(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 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
PHP学习 变量使用总结
2011/03/24 PHP
JavaScript中的事件处理
2008/01/16 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Python根据服务获取端口号的方法
2019/09/25 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
Python实现FLV视频拼接功能
2020/01/21 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
开学季活动策划方案
2014/02/28 职场文书
花木兰观后感
2015/06/10 职场文书
工伤调解协议书
2016/03/21 职场文书
同学联谊会邀请函
2019/06/24 职场文书
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python