如何使用CSS+JS+Cookie實現頁腳固定廣告展示

這篇文章主要為大家展示了“如何使用CSS+JS+Cookie實現頁腳固定廣告展示”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用CSS+JS+Cookie實現頁腳固定廣告展示”這篇文章吧。

HTML

首先，我們將橫幅廣告的html代碼放到頁面最底部，因為是最后加載的。也可以使用外部js動態插入到頁面底部。整個HTML結構由遮罩層.float_layer，內容層.float_content組成，其中.float_bg為廣告部分，內容可以是圖片、文字等任意形式的html元素，.float_close是關閉按鈕，用戶不喜歡廣告可以關閉展示。

代碼如下:

<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://www.jb51.net/">http://www.jb51.net/</a>" title='廣告部分'> 
<div class="float_slogan"><!--廣告內容--></div> 
</a> 
</div> 
<div class="float_close"> 
<a onclick="closeFootAd()" href="#" title="我知道了"></a> 
</div> 
</div> 
</div> 

CSS

我們使用CSS將廣告條固定在頁腳，以及展示半透明遮罩效果、廣告關閉按鈕等效果。我們知道position: fixed是固定元素位置，配合bottom、right等屬性可以將元素固定在頁面某個位置，并不隨頁面滾動而滾動。使用opacity屬性可以實現透明效果。我們給.float_slogan一個background屬性，將廣告圖片作為背景加入，當然你也可以不需要這樣做，直接在上面的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先去檢測頁底橫幅廣告關聯的cookie信息，如果cookie表示的信息是關閉的，則不顯示頁底廣告，反之顯示頁底廣告。我們在點擊關閉按鈕的時候會調用closeFootAd()函數，點擊關閉按鈕，則將廣告條隱藏，即關閉，并設置cookie相關值。以下是整個javascript的操作代碼：
 

復制代碼

代碼如下:

window.onload = function(){ 
if(getCookie("footad")==0){ 
document.getElementById("float_mask").style.display="none"; 
}else{ 
document.getElementById("float_mask").style.display="block"; 
} 
} 
//關閉底部廣告 
function closeFootAd() { 
document.getElementById("float_mask").style.display="none"; 
setCookie("footad","0"); 
} 

//設置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函數 
function getCookie(name){ 
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
if(arr != null) return unescape(arr[2]); return null; 
} 

以上是“如何使用CSS+JS+Cookie實現頁腳固定廣告展示”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！