使用javascript控制cookie显示和隐藏背景图


Posted in Javascript onFebruary 12, 2014

每当重大节日期间,各大主流网站首页会披上节日的盛装,设计者一般会使用大幅背景图片来获得更好的视觉冲击效果,当然,也要考虑到有些用户不习惯这大背景图,那么在背景图上放置“关闭”按钮是有必要的,用户只要点击“关闭背景”按钮,大幅背景图将会消失。

我们使用javascript来控制背景图片的显示和隐藏,当点击关闭按钮时,控制CSS使页面不加载背景图,同时记录COOKIE相关参数,并设置cookie的有效期,那么在cookie有效期内刷新页面,是不会再加载背景图的,如果cookie失效,则又会重新加载背景图片。

HTML

一般背景图片的关闭按钮都是放在页面头部的,我们在页面的顶部放置关闭背景的按钮,当然这个按钮是做好的图片。

<div id="top"> 
    <em id="close_btn" title="关闭背景"></em> 
</div>

CSS

还需要准备大背景图片,我们从网上找张大背景图拿来用,用CSS做简单的页面布局。

 

*{margin:0; padding:0} 
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"\5b8b\4f53", sans-serif;} 
#top{clear:both;width:1000px;height:60px;margin:0 auto;overflow:hidden;position:relative;} 
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer; 
display:block;z-index:2;}

部署完了css后,页面还没有什么效果,我们需要使用javascript来加载背景图片。
Javascript
当第一次加载页面时(这时还没有设置cookie等),当然要把背景图片加载,显示完整的页面效果。当我们点击“关闭”按钮时,这个时候Javascript会把页面已经加载的背景图片干掉,即不显示出来,并且设置cookie,通过cookie的过期时间来控制大背景图片是否显示。即当下次刷新页面时,如果cookie未过期,则不会加载大背景图片,反之则加载大背景图片,请看代码:

 

$(function(){ 
    if(getCookie("mainbg")==0){ 
        $("body,html").css("background","none"); 
        $("#close_btn").hide(); 
    }else{ 
        $("body").css("background","url(images/body_bg.jpg)) no-repeat 50% 0"); 
        $("html").css("background","url(images/html_bg.jpg) repeat-x 0 0"); 
        $("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat"); 
    } 
    //点击关闭 
    $("#close_btn").click(function(){ 
        $("body,html").css("background","none"); 
        $("#close_btn").hide(); 
        setCookie("mainbg","0"); 
    }); 
})

很显然,我们是通过设置页面元素的CSS背景background属性来控制背景图的加载,并且通过getCookie()和setCookie()两个自定义函数来读取和设置cookie的。

 

//设置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; 
}
Javascript 相关文章推荐
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
详解Vue This$Store总结
Dec 17 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 #Javascript
js post提交调用方法
Feb 12 #Javascript
JQuery中操作Css样式的方法
Feb 12 #Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 #Javascript
js判断设备是否为PC并调整图片大小
Feb 12 #Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 #Javascript
js弹出div并显示遮罩层
Feb 12 #Javascript
You might like
php中mt_rand()随机数函数用法
2014/11/24 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
img标签中onerror用法
2009/08/13 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
浅谈document.write()输出样式
2015/05/07 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python简单实现控制电脑的方法
2018/01/22 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
windows支持哪个版本的python
2020/07/03 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
竞聘书怎么写,如何写?
2014/03/31 职场文书
求职信范文大全
2014/05/26 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
安全保证书格式
2015/02/28 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis