首页前端开发CSSCSS+JS+Cookie实现页脚固定广告展示

CSS+JS+Cookie实现页脚固定广告展示

时间2024-05-23 22:42:03发布访客分类CSS浏览80
导读:经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条。本文将介绍使用CSS+Cookie来实现这一效果。...

经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条。本文将介绍使用CSS+Cookie来实现这一效果。

源码下载:点此下载

HTML

首先,我们将横幅广告的html代码放到页面最底部,因为是最后加载的。也可以使用外部js动态插入到页面底部。整个HTML结构由遮罩层.float_layer,内容层.float_content组成,其中.float_bg为广告部分,内容可以是图片、文字等任意形式的html元素,.float_close是关闭按钮,用户不喜欢广告可以关闭展示。

复制代码 代码如下:

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

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: CSS+JS+Cookie实现页脚固定广告展示
本文地址: https://pptw.com/jishu/666614.html
CSS实现右侧底部悬浮效果 WordPress禁用Embeds功能 Disable Embeds插件与无插件

游客 回复需填写必要信息