使用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 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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 验证码实例代码
2010/06/01 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP中使用BigMap实例
2015/03/30 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
PHP7新增函数
2021/03/09 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
javascript 常用代码技巧大收集
2009/02/25 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中subprocess的简单使用示例
2015/07/28 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
安装2019Pycharm最新版本的教程详解
2019/10/22 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
介绍下Lucene建立索引的过程
2016/03/02 面试题
农村婚礼证婚词
2014/01/08 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
十佳护士先进事迹
2014/05/08 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
高中学生自我评价范文
2014/09/23 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
作风整顿剖析材料
2014/09/30 职场文书
毕业设计致谢语
2015/05/14 职场文书