jQuery實現右下角懸浮廣告代碼

HTML

首先準備廣告素材，並在body中建立一個使用者懸浮的廣告主體DIV#pop，設定為不顯示，在廣告的上部標題列有關閉按鈕，點擊關閉時，則關閉隱藏懸浮廣告。
 

代碼如下	複製代碼
<div id="pop" style="display:none;">       <div id="popHead">         <a id="popClose" title="關閉">關閉</a>         <h2>贊助廣告</h2>     </div>     <div id="popContent">     <a href="http://www.111cn.net/" target="_blank"><img src="images/imgad.jpg"></a>     </div> </div>

CSS
使用CSS稍微美化#pop。注意其實我們使用position:fixed;right:0;bottom:0;其實就已經將廣告位置固定在右下角了，但是要兼顧那些IE6的使用者，ie6不支援fixed，這個問題我們可以通過jquery的外掛程式來解決ie6的相容行問題。

代碼如下	複製代碼
#pop{background:#fff;width:300px; height:282px;font-size:12px;position:fixed;right:0;bottom:0;} #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:12px; padding-left:10px;} #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;} #popHead #popClose{position:absolute;right:10px;top:1px;} #popHead a#popClose:hover{color:#f00;cursor:pointer;}

jQuery
該懸浮廣告效果依賴於jQuery，所以在頁面載入時別忘了先載入jQuery庫檔案。
 

代碼如下

複製代碼

function Pop(){     this.apearTime=1000;     this.hideTime=500;     this.delay=10000;     //顯示     this.showDiv();     //關閉     this.closeDiv(); } Pop.prototype={   showDiv:function(time){     if (!($.browser.msie && ($.browser.version == "6.0") && !$.support.style)) {       $('#pop').slideDown(this.apearTime).delay(this.delay).fadeOut(400);;     } else{//調用jquery.fixed.js,解決ie6不能用fixed       $('#pop').show();             jQuery(function($j){                 $j('#pop').positionFixed()             })     }   },   closeDiv:function(){       $("#popClose").click(function(){             $('#pop').hide();           }     );   } }

在ie6的情況下，我們調用了jquery.fixed這個外掛程式，當然我們已經把該外掛程式放在了下載包裡的ads.js中，請下載壓縮包。調用這段代碼效果只需要這樣寫：
 

代碼如下	複製代碼
var popad=new Pop();

這樣，我們就可以展示一個右下角懸浮廣告效果，我們也可以繼續擴充，向Pop()傳入一些參數，可以擴充為網站訊息提示框等效果，這個留給感興趣的同學