CSS+JS+Cookie實(shí)現(xiàn)頁(yè)腳固定廣告展示(支持關(guān)閉、一段時(shí)間內(nèi)不顯示)
我要評(píng)論經(jīng)?？吹接行┚W(wǎng)站為了吸引用戶(hù)注意，在頁(yè)面底部放置固定橫幅廣告，用戶(hù)滾動(dòng)頁(yè)面時(shí)，橫幅廣告一直固定在頁(yè)底，并不隨頁(yè)面滾動(dòng)而滾動(dòng)，當(dāng)然一般允許用戶(hù)可以關(guān)閉廣告條，并設(shè)置一定時(shí)間內(nèi)不再顯示此廣告條。本文將介紹使用CSS+Cookie來(lái)實(shí)現(xiàn)這一效果。
源碼下載：點(diǎn)此下載
HTML
首先，我們將橫幅廣告的html代碼放到頁(yè)面最底部，因?yàn)槭亲詈蠹虞d的。也可以使用外部js動(dòng)態(tài)插入到頁(yè)面底部。整個(gè)HTML結(jié)構(gòu)由遮罩層.float_layer，內(nèi)容層.float_content組成，其中.float_bg為廣告部分，內(nèi)容可以是圖片、文字等任意形式的html元素，.float_close是關(guān)閉按鈕，用戶(hù)不喜歡廣告可以關(guān)閉展示。
<div class="float_mask" id="float_mask">
<div class="float_layer">
</div>
<div class="float_content clearfix">
<div class="float_bg">
<a target="_blank" href="<a href="http://m.fzitv.net/">http://m.fzitv.net/</a>" title='廣告部分'>
<div class="float_slogan"><!--廣告內(nèi)容--></div>
</a>
</div>
<div class="float_close">
<a onclick="closeFootAd()" href="#" title="我知道了"></a>
</div>
</div>
</div>
CSS
我們使用CSS將廣告條固定在頁(yè)腳，以及展示半透明遮罩效果、廣告關(guān)閉按鈕等效果。我們知道position: fixed是固定元素位置，配合bottom、right等屬性可以將元素固定在頁(yè)面某個(gè)位置，并不隨頁(yè)面滾動(dòng)而滾動(dòng)。使用opacity屬性可以實(shí)現(xiàn)透明效果。我們給.float_slogan一個(gè)background屬性，將廣告圖片作為背景加入，當(dāng)然你也可以不需要這樣做，直接在上面的html中加入圖片或文字。
.float_mask{position: fixed;z-index: 19999;display:none;width: 100%;right: 0; bottom: 0;height: 105px;_bottom: auto;_width: 100%;_position: absolute;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
.float_layer{position: absolute;left: 0;top: 0;z-index: 1;width: 100%;height: 100%;background: #071828;filter: alpha(opacity=80);opacity: 0.80;}
.float_content{ position: relative;z-index: 2;width: 1005px;height: 100%;margin: 0 auto;padding-left: 70px;}
.float_bg, .float_close{ float: left;}
.float_bg{position: relative;width: 820px;height: 135px;margin-top: -27px;}
.float_slogan {position: absolute; background: url("footer_ad.png") 0 0 no-repeat;}
.float_slogan{left: 0;bottom: 0;width: 800px;height: 135px;cursor: pointer;}
.float_close{width: 60px;margin-top: 30px;}
.float_close a {display: block;width: 53px; height: 52px; margin-left: 7px; background: url("close.png") 0 0 no-repeat;-webkit-transition: all 400ms;}
JAVASCRIPT
我們初次打開(kāi)頁(yè)面時(shí)，Javascript先去檢測(cè)頁(yè)底橫幅廣告關(guān)聯(lián)的cookie信息，如果cookie表示的信息是關(guān)閉的，則不顯示頁(yè)底廣告，反之顯示頁(yè)底廣告。我們?cè)邳c(diǎn)擊關(guān)閉按鈕的時(shí)候會(huì)調(diào)用closeFootAd()函數(shù)，點(diǎn)擊關(guān)閉按鈕，則將廣告條隱藏，即關(guān)閉，并設(shè)置cookie相關(guān)值。以下是整個(gè)javascript的操作代碼：
window.onload = function(){
if(getCookie("footad")==0){
document.getElementById("float_mask").style.display="none";
}else{
document.getElementById("float_mask").style.display="block";
}
}
//關(guān)閉底部廣告
function closeFootAd() {
document.getElementById("float_mask").style.display="none";
setCookie("footad","0");
}
//設(shè)置cookie
function setCookie(name,value){
var exp = new Date();
exp.setTime(exp.getTime() + 1*60*60*1000);//有效期1小時(shí)
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//取cookies函數(shù)
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
完！
相關(guān)文章
CSS3打造的現(xiàn)代交互式登錄界面詳細(xì)實(shí)現(xiàn)過(guò)程
本文介紹CSS3和jQuery在登錄界面設(shè)計(jì)中的應(yīng)用,涵蓋動(dòng)畫(huà)、選擇器、自定義字體及盒模型技術(shù),提升界面美觀與交互性,同時(shí)優(yōu)化性能和可訪(fǎng)問(wèn)性，感興趣的朋友跟隨小編一起看看吧2025-06-20CSS普通流、浮動(dòng)與定位網(wǎng)頁(yè)布局三大機(jī)制及最佳實(shí)踐
本文給大家講解CSS 的三種核心布局機(jī)制——普通流(Normal Flow)、浮動(dòng)(Float)和定位(Positioning)對(duì)于創(chuàng)建靈活、響應(yīng)式的網(wǎng)頁(yè)至關(guān)重要,本文將深入探討這三種機(jī)制的工作原2025-06-19
css實(shí)現(xiàn)角標(biāo)效果并帶有文章或圖標(biāo)效果(完整代碼)
文章介紹如何用CSS實(shí)現(xiàn)角標(biāo)效果,通過(guò).active類(lèi)結(jié)合::after和::before偽元素,利用定位、邊框和旋轉(zhuǎn)創(chuàng)建紅色邊框與白色三角形的提示標(biāo)志,適用于按鈕或卡片元素的視覺(jué)增強(qiáng)設(shè)計(jì)2025-06-19CSS Anchor Positioning重新定義錨點(diǎn)定位的時(shí)代來(lái)臨(最新推薦)
CSS Anchor Positioning是一項(xiàng)仍在草案中的新特性，由 Chrome 125 開(kāi)始提供原生支持需啟用實(shí)驗(yàn) flag,它允許你在 CSS 中通過(guò)錨點(diǎn)（anchor）來(lái)相對(duì)于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的應(yīng)用與詳細(xì)對(duì)比
CSS 中的 position 屬性用于控制元素的定位方式，不同的定位方式會(huì)影響元素在頁(yè)面中的布局和層疊關(guān)系,以下是 static、relative、absolute、fixed、sticky 的詳細(xì)對(duì)比和應(yīng)用2025-06-17CSS place-items: center解析與用法詳解
place-items: center; 是一個(gè)強(qiáng)大的 CSS 簡(jiǎn)寫(xiě)屬性，用于同時(shí)控制 網(wǎng)格(Grid) 和 彈性盒(Flexbox) 布局中的對(duì)齊方式，本文給大家介紹CSS place-items: center； 詳解與用法2025-06-17
CSS實(shí)現(xiàn)元素?fù)螡M(mǎn)剩余空間的五種方法
在日常開(kāi)發(fā)中，我們經(jīng)常需要讓某個(gè)元素占據(jù)容器的剩余空間，本文將介紹5種不同的方法來(lái)實(shí)現(xiàn)這個(gè)需求，并分析各種方法的優(yōu)缺點(diǎn)，感興趣的朋友一起看看吧2025-06-17CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
CSS單位區(qū)別與使用場(chǎng)景總結(jié)：px絕對(duì)、vw/vh響應(yīng)式,%繼承父尺寸,em/rem文字縮放,vmin/vmax適應(yīng)寬高變化,固定布局用px或%,響應(yīng)式布局用vw/vh/rem,文字用em或rem，本文給大家2025-06-16- 這篇文章主要介紹了CSS3中的字體及相關(guān)屬性，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2025-06-12
CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
這篇文章主要介紹了CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2025-05-21
