仿中关村在线首页弹出式广告插件(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 null和undefined区别分析
Oct 14 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
利用js编写网页进度条效果
Oct 08 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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
模仿OSO的论坛(三)
2006/10/09 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
用原生js做单页应用
2017/01/17 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
简单谈谈Python中的闭包
2016/11/30 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Python金融数据可视化汇总
2017/11/17 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
基于python 凸包问题的解决
2020/04/16 Python
pandas的resample重采样的使用
2020/04/24 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
给客户的感谢信
2015/01/21 职场文书
离婚代理词范文
2015/05/23 职场文书
中学语文教学反思
2016/02/16 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android