使用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 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
react-router中的属性详解
Jun 01 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
解决Vue动态加载本地图片问题
Oct 09 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
Jan 25 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邮件类
2007/01/03 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
从javascript语言本身谈项目实战
2006/12/27 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
javascript闭包的理解和实例
2010/08/12 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
浅析python函数式编程
2020/09/26 Python
Python用Jira库来操作Jira
2020/12/28 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
计算机网络专业自荐书
2014/06/09 职场文书
创业计划书之水果店
2019/07/18 职场文书