亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery右下角懸浮廣告實例

 更新時間:2016年10月17日 11:10:23   作者:月光光  
現(xiàn)在很多網站都有懸浮廣告,本篇文章主要介紹了jQuery右下角懸浮廣告,非常具有實用效果,有需要的朋友可以來參考一下。

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

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://chabaoo.cn/" 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(); 

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

相關文章

  • jquery JSON的解析方式示例介紹

    jquery JSON的解析方式示例介紹

    這里以jquery異步獲取的數據類型——json對象和字符串為依據,分別介紹兩種方式獲取到的結果處理方式
    2014-07-07
  • jQuery調用Webservice傳遞json數組的方法

    jQuery調用Webservice傳遞json數組的方法

    這篇文章主要介紹了jQuery調用Webservice傳遞json數組的方法,實例分析了jQuery基于ajax與Webservice傳遞json數據的相關實現(xiàn)技巧,需要的朋友可以參考下
    2016-08-08
  • jQuery實現(xiàn)調整表格單列順序完整實例

    jQuery實現(xiàn)調整表格單列順序完整實例

    這篇文章主要介紹了jQuery實現(xiàn)調整表格單列順序的方法,結合完整實例形式分析了jQuery響應鼠標事件及動態(tài)操作頁面元素的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2016-06-06
  • jQuery插件開發(fā)的五種形態(tài)小結

    jQuery插件開發(fā)的五種形態(tài)小結

    這篇文章主要介紹了jQuery插件開發(fā)的五種形態(tài)小結,具體的內容就是解決javascript插件的8種特征,非常的詳細,這里推薦給小伙伴們。
    2015-03-03
  • jquery通過ajax加載一段文本內容的方法

    jquery通過ajax加載一段文本內容的方法

    這篇文章主要介紹了jquery通過ajax加載一段文本內容的方法,是jQuery針對Ajax的靈活應用,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-01-01
  • 網頁中返回頂部代碼(多種方法)另附注釋說明

    網頁中返回頂部代碼(多種方法)另附注釋說明

    下面就說下簡單的返回頂部效果的代碼實現(xiàn),附注釋說明,最簡單的靜態(tài)返回頂部,點擊直接跳轉頁面頂部及用js模擬滾動效果上滑至頂部
    2013-04-04
  • 基于jquery的跟隨屏幕滾動代碼

    基于jquery的跟隨屏幕滾動代碼

    我們在很多網站看到,當我們滾動網頁時,網頁內的廣告或某個小區(qū)域并不會消失,而是浮動在屏幕的某個地方,特別是一些局域廣告
    2012-07-07
  • jQuery內容過濾選擇器用法分析

    jQuery內容過濾選擇器用法分析

    這篇文章主要介紹了jQuery內容過濾選擇器用法,實例分析了:contains()、:has()、:empty()、:parent等內容過濾選擇器的使用技巧,需要的朋友可以參考下
    2015-02-02
  • jquery 經典動畫菜單效果代碼

    jquery 經典動畫菜單效果代碼

    JS·經典·炫彩菜單(動畫效果) for jquery
    2010-01-01
  • jQuery內容選擇器與表單選擇器實例分析

    jQuery內容選擇器與表單選擇器實例分析

    這篇文章主要介紹了jQuery內容選擇器與表單選擇器,結合實例形式分析了jQuery內容選擇器與表單選擇器的功能、用法及相關操作注意事項,需要的朋友可以參考下
    2019-06-06

最新評論