CSS+JS+Cookie完成页脚固定不动广告宣传展现(适用关

日期:2021-01-20 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

常常看到一些网站以便吸引住客户留意,在网页页面底部置放固定不动横幅广告宣传,客户翻转网页页面时,横幅广告宣传1直固定不动在页底,其实不随网页页面翻转而翻转,自然1般容许客户能够关掉广告宣传条,并设定1定时执行间内已不显示信息此广告宣传条。本文将详细介绍应用CSS+Cookie来完成这1实际效果。

源代码免费下载:点此免费下载

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.jb51.net/">https://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_slogan1个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: ⑵7px;}
.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;
}

完!