jQuery實(shí)現(xiàn)右下角懸浮廣告-創(chuàng)新互聯(lián)

本篇內(nèi)容主要講解“jQuery實(shí)現(xiàn)右下角懸浮廣告”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“jQuery實(shí)現(xiàn)右下角懸浮廣告”吧!

10余年的豐城網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整豐城建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“豐城網(wǎng)站設(shè)計(jì)”,“豐城網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

右下角懸浮廣告是一種常見的網(wǎng)頁廣告展示方式，而且對(duì)用戶瀏覽有干擾之嫌但對(duì)網(wǎng)站收益來說是很受站長(zhǎ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)閉隱藏懸浮廣告。

#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，所以在頁面載入時(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)用這段代碼效果只需要這樣寫：

var popad=new Pop();

這樣，我們就可以展示一個(gè)右下角懸浮廣告效果，我們也可以繼續(xù)擴(kuò)展，向Pop()傳入一些參數(shù)，可以擴(kuò)展為網(wǎng)站消息提示框等效果，這個(gè)留給感興趣的同學(xué)

到此，相信大家對(duì)“jQuery實(shí)現(xiàn)右下角懸浮廣告”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)建站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

新聞標(biāo)題：jQuery實(shí)現(xiàn)右下角懸浮廣告-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article0/dsjdoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站排名、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)