仿中关村在线首页弹出式广告插件(jQuery版)
仿中关村在线首页弹出式广告插件(jQuery版)
发布时间:2016-12-30 来源:查字典编辑
摘要:其的就不多说啦,直接上代码:jquery插件:复制代码代码如下:/*疯狂秀才制作于2012-04-2417:00QQ:1055818239e...

其的就不多说啦,直接上代码:

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教程学习
编程开发子分类