jQuery右下角懸浮廣告實例

2019-11-20 08:44:08

字體：大中小

來源：轉載

供稿：網友

右下角懸浮廣告是一種常見的網頁廣告展示方式，而且對用戶瀏覽有干擾之嫌但對網站收益來說是很受站長們歡迎的。今天我給大家分享一個使用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.survivalescaperooms.com/" 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中，請下載壓縮包。調用這段代碼效果只需要這樣寫：