JavaScript实现背景图显示与隐藏及Cookie持久化

背景图显隐需求与原理

在重大节日期间，主流网站首页常通过大幅背景图片营造节日氛围，以增强视觉冲击力。然而，部分用户可能不喜欢这种大背景效果，因此需要在背景图上添加“关闭”按钮。用户点击该按钮后，大幅背景图片即可隐藏。

利用JavaScript控制背景图片的显示与隐藏：当用户点击关闭按钮时，通过修改CSS样式使页面不加载背景图，同时记录Cookie相关参数并设置有效期。在Cookie有效期内刷新页面，背景图不会重新加载；若Cookie失效，则背景图会再次显示。

HTML与CSS结构实现

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;}

JavaScript逻辑与Cookie控制

部署CSS后，页面尚未呈现完整效果，需使用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;
}