仿中关村在线首页弹出式广告插件(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 相关文章推荐
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
js中键盘事件实例简析
Jan 10 Javascript
javascript的BOM
May 03 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JavaScript实现倒计时跳转页面功能【实用】
Dec 13 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 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/08/08 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
详解vue 组件注册
2020/11/20 Vue.js
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
详解Python with/as使用说明
2018/12/13 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
如何用python免费看美剧
2020/08/11 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python如何绘制疫情图
2020/09/16 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
励志演讲稿500字
2014/08/21 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
个人求职自荐信范文
2015/03/06 职场文书
三八节祝酒词
2015/08/11 职场文书
运动会200米广播稿
2015/08/19 职场文书
python实现双向链表原理
2022/05/25 Python