仿中关村在线首页弹出式广告插件(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 相关文章推荐
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
javascript实现留言板功能
Feb 08 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 MemCached 高级缓存应用代码
2010/08/05 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
JS如何在数组指定位置插入元素
2020/03/10 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
Python随机读取文件实现实例
2017/05/25 Python
python skimage 连通性区域检测方法
2018/06/21 Python
python实现泊松图像融合
2018/07/26 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
校园活动策划方案
2014/06/13 职场文书
2015年安全生产责任书
2015/01/30 职场文书
采购内勤岗位职责
2015/04/13 职场文书
回复函格式及范文
2015/07/14 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers