Welcome 微信登录

首页 / 脚本样式 / JavaScript / 仿中关村在线首页弹出式广告插件(jQuery版)

其的就不多说啦,直接上代码:
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啦!