使用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 相关文章推荐
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
js select实现省市区联动选择
Apr 17 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 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强制运行广告的方法
2014/12/01 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
简介JavaScript中substring()方法的使用
2015/06/06 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python实现保存网页到本地示例
2014/03/16 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python初学者常见错误详解
2019/07/02 Python
django model object序列化实例
2020/03/13 Python
商得四方公司面试题(gid+)
2014/04/30 面试题
优秀学生获奖感言
2014/02/15 职场文书
医院保洁服务方案
2014/06/11 职场文书
班级活动总结格式
2014/08/30 职场文书
首都博物馆观后感
2015/06/05 职场文书
科级干部培训心得体会
2016/01/06 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
Python如何识别银行卡卡号?
2021/06/10 Python
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers