仿中关村在线首页弹出式广告插件(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限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
JavaScript mixin实现多继承的方法详解
Mar 30 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 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脚本的10个技巧(7)
2006/10/09 PHP
php 获取mysql数据库信息代码
2009/03/12 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
js实现简单页面全屏
2019/09/17 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
英语专业毕业生求职简历的自我评价
2013/10/24 职场文书
总务岗位职责
2013/11/19 职场文书
服装厂厂长职责
2013/12/16 职场文书
打造完美自荐信
2014/01/24 职场文书
运动会通讯稿500字
2014/02/20 职场文书
岗位廉政承诺书
2014/03/27 职场文书
工作总结与自我评价
2014/09/18 职场文书
学生检讨书怎么写
2014/10/09 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
项目合作意向书
2015/05/08 职场文书
篮球赛新闻稿
2015/07/17 职场文书
《日月潭》教学反思
2016/02/20 职场文书