CSS+JS+Cookie實現(xiàn)頁腳固定廣告展示(支持關(guān)閉、一段時間內(nèi)不顯示)
我要評論經(jīng)?？吹接行┚W(wǎng)站為了吸引用戶注意，在頁面底部放置固定橫幅廣告，用戶滾動頁面時，橫幅廣告一直固定在頁底，并不隨頁面滾動而滾動，當(dāng)然一般允許用戶可以關(guān)閉廣告條，并設(shè)置一定時間內(nèi)不再顯示此廣告條。本文將介紹使用CSS+Cookie來實現(xiàn)這一效果。
源碼下載：點此下載
HTML
首先，我們將橫幅廣告的html代碼放到頁面最底部，因為是最后加載的。也可以使用外部js動態(tài)插入到頁面底部。整個HTML結(jié)構(gòu)由遮罩層.float_layer，內(nèi)容層.float_content組成，其中.float_bg為廣告部分，內(nèi)容可以是圖片、文字等任意形式的html元素，.float_close是關(guān)閉按鈕，用戶不喜歡廣告可以關(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://chabaoo.cn/">http://chabaoo.cn/</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將廣告條固定在頁腳，以及展示半透明遮罩效果、廣告關(guān)閉按鈕等效果。我們知道position: fixed是固定元素位置，配合bottom、right等屬性可以將元素固定在頁面某個位置，并不隨頁面滾動而滾動。使用opacity屬性可以實現(xiàn)透明效果。我們給.float_slogan一個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
我們初次打開頁面時，Javascript先去檢測頁底橫幅廣告關(guān)聯(lián)的cookie信息，如果cookie表示的信息是關(guān)閉的，則不顯示頁底廣告，反之顯示頁底廣告。我們在點擊關(guān)閉按鈕的時候會調(diào)用closeFootAd()函數(shù)，點擊關(guān)閉按鈕，則將廣告條隱藏，即關(guān)閉，并設(shè)置cookie相關(guān)值。以下是整個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小時
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)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非常基礎(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
CSS3 最強二維布局系統(tǒng)之Grid 網(wǎng)格布局
CS3的Grid網(wǎng)格布局是目前最強的二維布局系統(tǒng),可以同時對列和行進(jìn)行處理,將網(wǎng)頁劃分成一個個網(wǎng)格,可以任意組合不同的網(wǎng)格,做出各種各樣的布局，本文介紹CSS3 最強二維布局系2025-02-27
