仿中关村在线首页弹出式广告插件(jQuery版)
2023-06-13 09:14:33 时间
其的就不多说啦,直接上代码:
jquery插件:
复制代码代码如下:
jquery插件:
/*
疯狂秀才制作于2012-04-2417: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);
varfkxc_ad=0;
varbodyWidth=$(window).width();
var_adBodyContainerID="bigAd_"+settings.width;
var_adCloseContainerID="bitAdClose_"+settings.width;
varcloseHtml="广告剩余<spanid="__sec"></span>秒<ahref="javascript:;"id="__close_ad">关闭</a>";
//广告内容容器
var_adContent="<divid=""+_adBodyContainerID+""></div>";
//关闭按钮容器
var_adCloseBtn="<divid=""+_adCloseContainerID+"">"+closeHtml+"</div>";
varself=$(this);
$(this).empty().html(_adContent+_adCloseBtn);
$("#__close_ad").click(function(){
window.clearTimeout(fkxc_ad);
self.fadeOut();
})
if(settings.border){
$("#"+_adBodyContainerID).css("border","1pxsolid#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();
vardaojishi=function(s){
fkxc_ad=setInterval(function(){
if(s==0){
self.fadeOut();
}
$("#__sec").text(s);
s--;
},1000);
}
daojishi(settings.sec)
}
})(jQuery)
HTML:
<divid="testad"></div>
<script>
$(function(){
$("#testad").quickAd({
html:"<imgsrc="11_523049_88a5614dc705882(1).jpg"width=760height=400/>"
});
})
</script>
Ok啦!
相关文章
- 使用 jQuery 插件 CitySelect 实现省市联动效果
- jQuery Google Charts—-一个封装google chart api的jquery插件详解编程语言
- JQuery上传插件Uploadify API详解编程语言
- jquery地区选择插件详解编程语言
- Jquery插件easyUI属性汇总
- 分享14个很酷的jQuery导航菜单插件
- jquery.Jwin.js基于jquery的弹出层插件代码
- 基于jquery的多功能软键盘插件
- jQuery实现form表单reset按钮重置清空表单功能
- 6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
- jquery表格内容筛选实现思路及代码
- jquery缓存问题的几个解决方法
- jQuery对下拉框,单选框,多选框的操作
- 编写高效jQuery代码的4个原则和5个技巧
- jquery插件之定时查询待处理任务数量
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 基于jquery实现等比缩放图片
- jQuery不使用插件及swf实现无刷新文件上传
- 分享28款免费实用的JQuery图片和内容滑块插件
- 自己动手手写jQuery插件总结
- jquery实现在页面加载的时自动为日期插件添加当前日期