仿中关村在线首页弹出式广告插件(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啦! |