仿中关村在线首页弹出式广告插件(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入门教程(10) 认识其他对象
Jan 31 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
Js面试算法详解
Apr 08 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
js canvas实现五子棋小游戏
Jan 22 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中模拟POST传递数据的两种方法分享
2011/09/16 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
jQuery 阴影插件代码分享
2012/01/09 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
警察思想汇报
2014/01/04 职场文书
测控技术自荐信
2014/06/05 职场文书
师范生求职自荐信
2014/06/14 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
会议通知
2015/04/15 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle