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啦!
仿中关村在线首页弹出式广告插件(jQuery版)
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@