仿中关村在线首页弹出式广告插件(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 相关文章推荐
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
cnpm加速Angular项目创建的方法
Sep 07 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
详解PHP队列的实现
2019/03/14 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
深入浅出ES6之let和const命令
2016/08/25 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
Python 移动光标位置的方法
2019/01/20 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
python实现逻辑回归的示例
2020/10/09 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
学前教育教师求职自荐信
2013/09/22 职场文书
北大自主招生自荐信
2013/10/19 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
共产党员承诺书
2014/03/25 职场文书
开学寄语大全
2014/04/08 职场文书
七一建党节演讲稿
2014/09/11 职场文书
朋友聚会开场白
2015/06/01 职场文书
通知怎么写?
2019/04/17 职场文书
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python