怎么用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="https://www..com/">https://www..com/</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实现页脚固定广告展示”的内容了，经过本文的学习后，相信大家对怎么用CSS+JS+Cookie实现页脚固定广告展示这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！