快捷導(dǎo)航

jQuery右下角懸浮廣告實(shí)例

更新時(shí)間：2016年10月17日 11:10:23 作者：月光光

現(xiàn)在很多網(wǎng)站都有懸浮廣告，本篇文章主要介紹了jQuery右下角懸浮廣告，非常具有實(shí)用效果，有需要的朋友可以來參考一下。

右下角懸浮廣告是一種常見的網(wǎng)頁廣告展示方式，而且對(duì)用戶瀏覽有干擾之嫌但對(duì)網(wǎng)站收益來說是很受站長們歡迎的。今天我給大家分享一個(gè)使用jQuery來實(shí)現(xiàn)網(wǎng)頁右下角廣告的實(shí)例。它的優(yōu)點(diǎn)是可以從右下角緩慢升起，展示一定時(shí)間自動(dòng)消失，并且可以改成網(wǎng)站消息提示窗口。

HTML

首先準(zhǔn)備廣告素材，并在body中建立一個(gè)用戶懸浮的廣告主體DIV#pop，設(shè)置為不顯示，在廣告的上部標(biāo)題欄有關(guān)閉按鈕，點(diǎn)擊關(guān)閉時(shí)，則關(guān)閉隱藏懸浮廣告。

<div id="pop" style="display:none;"> 
  <div id="popHead"> 
  <a id="popClose" title="關(guān)閉">關(guān)閉</a> 
  <h2>贊助廣告</h2> 
 </div> 
 <div id="popContent"> 
 <a href="http://chabaoo.cn/" target="_blank"><img src="images/imgad.jpg"></a> 
 </div> 
</div>

CSS
使用CSS稍微美化#pop。注意其實(shí)我們使用position:fixed;right:0;bottom:0;其實(shí)就已經(jīng)將廣告位置固定在右下角了，但是要兼顧那些IE6的用戶，ie6不支持fixed，這個(gè)問題我們可以通過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，所以在頁面載入時(shí)別忘了先載入jQuery庫文件。

function Pop(){ 
 this.apearTime=1000; 
 this.hideTime=500; 
 this.delay=10000; 
 //顯示 
 this.showDiv(); 
 //關(guān)閉 
 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{//調(diào)用jquery.fixed.js,解決ie6不能用fixed 
  $('#pop').show(); 
   jQuery(function($j){ 
    $j('#pop').positionFixed() 
   }) 
 } 
 }, 
 closeDiv:function(){ 
  $("#popClose").click(function(){ 
   $('#pop').hide(); 
   } 
 ); 
 } 
}

在ie6的情況下，我們調(diào)用了jquery.fixed這個(gè)插件，當(dāng)然我們已經(jīng)把該插件放在了下載包里的ads.js中，請(qǐng)下載壓縮包。調(diào)用這段代碼效果只需要這樣寫：