js调用html5cookie,CSS+JS+Cookie实现页脚固定广告展示
经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条。本文将介绍使用CSS+Cookie来实现这一效果。
源码下载:点此下载
HTML
首先,我们将横幅广告的html代码放到页面最底部,因为是最后加载的。也可以使用外部js动态插入到页面底部。整个HTML结构由遮罩层.float_layer,内容层.float_content组成,其中.float_bg为广告部分,内容可以是图片、文字等任意形式的html元素,.float_close是关闭按钮,用户不喜欢广告可以关闭展示。
复制代码
代码如下:
http://www.jb51.net/" title='广告部分'>
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;
}
js调用html5cookie,CSS+JS+Cookie实现页脚固定广告展示相关推荐
- 前端 如何将页脚固定在页面底部
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
- html固定页脚布局及样式,html页脚固定在底部的方法
html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } .container, .jumbotron { min-he ...
- 如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...
- 如何将页脚固定在页面底部
感觉有些繁琐.目前简单的,是在上continer中使用min-height属性,当然没有测试兼容性. -------2016-5-9 16:17:51-- source:如何将页脚固定在页面底部
- 如何将页脚固定在页面底部,而不是屏幕底部!
一个经典的 Sticky footers 布局问题 话不多说贴代码 <div class="main"><div class="main-box&quo ...
- html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
- html中各种js效果图,HTML+CSS+JS制作一个漂亮的橙子动态时钟
HTML+CSS+JS制作一个漂亮的橙子动态时钟 1. 效果图: 2. 背景产生: 利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里,利用径向渐变形成橙皮. background: rad ...
- css设置h5页脚固定底部
思路:将页面拆分为主体内容和页脚两大部分,给内容区域设置css样式:min-height: calc(100vh - 120px); <template><div class=&qu ...
- php架在底部页面,将页脚固定在页面底部的CSS实战
页脚的位置问题 网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方.页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分辨率较大 ...
最新文章
- Feign-1 Feign的简介及基础使用
- android白色字体代码,Android实现状态栏白底黑字效果示例代码
- JavaEE实战班第七天
- 【AI视野·今日CV 计算机视觉论文速览 第233期】Tue, 3 Aug 2021
- JS中同名函数有效执行顺序
- listview-android:打造万能通用适配器(转)
- CentOS7 服务器连接超时自动断开问题解决
- 车牌识别算法库EasyPR的编译实战
- qq登录界面及其实现
- 《统计学》第八版贾俊平第十章方差分析知识点总结及课后习题答案
- 【U盘量产】你的U盘坏了吗
- jsp+ssm+mysql实现的校园二手市场交易平台视频教程
- 个人网站6-深度定制网站样式和添加Google广告
- Python如此神奇,让繁琐工作自动化 (文中含Python基础)
- 计算机键盘上每个键的作用
- WdatePicker日历控件参数配置大全
- 字体大宝库:30款英文大写字体免费下载
- 师范生实习手册写作【模板】
- 计算机主机打不开怎么解决办法,电脑打不开的解决方法步骤详解
- muduo BlockingQueue详解
热门文章
- 每日一皮:叫你们别上泰坦尼克,嗓子都喊哑了!没一个听我的,最后还把我......
- 跟踪了下CSDN博客之星的竞选数据,我就看看不评论,你怎么看?
- 技术专题讨论:JPA vs MyBatis ?您如何选择?(有奖活动)
- 人脸识别数据集bin解压
- pyqt设置按钮边框
- 地平线VarGFaceNet
- Please use HDF reader for matlab v7.3 files
- torch.mean
- pytorch CrossEntropyLoss用法
- pyhton object is not subscriptable 解决