溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“jQuery實現右下角懸浮廣告”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“jQuery實現右下角懸浮廣告”吧!
右下角懸浮廣告是一種常見的網頁廣告展示方式，而且對用戶瀏覽有干擾之嫌但對網站收益來說是很受站長們歡迎的。今天我給大家分享一個使用jQuery來實現網頁右下角廣告的實例。它的優點是可以從右下角緩慢升起，展示一定時間自動消失，并且可以改成網站消息提示窗口。
首先準備廣告素材，并在body中建立一個用戶懸浮的廣告主體DIV#pop，設置為不顯示，在廣告的上部標題欄有關閉按鈕，點擊關閉時，則關閉隱藏懸浮廣告。
#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 h3{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庫文件。
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()傳入一些參數，可以擴展為網站消息提示框等效果，這個留給感興趣的同學
到此，相信大家對“jQuery實現右下角懸浮廣告”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
