怎么CSS+Cookie實現(xiàn)固定頁腳廣告條

本篇內(nèi)容主要講解“怎么CSS+Cookie實現(xiàn)固定頁腳廣告條”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“怎么CSS+Cookie實現(xiàn)固定頁腳廣告條”吧!

經(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)閉展示。

<p class="float_mask" id="float_mask">    <p class="float_layer">    </p>    <p class="float_content clearfix">        <p class="float_bg">            <a target="_blank" href="http://www.xuebuyuan.com/" title='廣告部分'>                <p class="float_slogan"><!--廣告內(nèi)容--></p>            </a>        </p>        <p class="float_close">            <a onclick="closeFootAd()" href="#" title="我知道了"></a>        </p>    </p> </p>

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; }

到此，相信大家對“怎么CSS+Cookie實現(xiàn)固定頁腳廣告條”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！