快捷導(dǎo)航

使用javascript控制cookie顯示和隱藏背景圖

更新時(shí)間：2014年02月12日 10:51:22 作者：

本文主要介紹了使用javascript來(lái)控制背景圖片的顯示和隱藏，當(dāng)點(diǎn)擊關(guān)閉按鈕時(shí)，控制CSS使頁(yè)面不加載背景圖，同時(shí)記錄COOKIE相關(guān)參數(shù)，并設(shè)置cookie的有效期

每當(dāng)重大節(jié)日期間，各大主流網(wǎng)站首頁(yè)會(huì)披上節(jié)日的盛裝，設(shè)計(jì)者一般會(huì)使用大幅背景圖片來(lái)獲得更好的視覺(jué)沖擊效果，當(dāng)然，也要考慮到有些用戶(hù)不習(xí)慣這大背景圖，那么在背景圖上放置“關(guān)閉”按鈕是有必要的，用戶(hù)只要點(diǎn)擊“關(guān)閉背景”按鈕，大幅背景圖將會(huì)消失。

我們使用javascript來(lái)控制背景圖片的顯示和隱藏，當(dāng)點(diǎn)擊關(guān)閉按鈕時(shí)，控制CSS使頁(yè)面不加載背景圖，同時(shí)記錄COOKIE相關(guān)參數(shù)，并設(shè)置cookie的有效期，那么在cookie有效期內(nèi)刷新頁(yè)面，是不會(huì)再加載背景圖的，如果cookie失效，則又會(huì)重新加載背景圖片。

HTML

一般背景圖片的關(guān)閉按鈕都是放在頁(yè)面頭部的，我們?cè)陧?yè)面的頂部放置關(guān)閉背景的按鈕，當(dāng)然這個(gè)按鈕是做好的圖片。

復(fù)制代碼代碼如下:

<div id="top"> 
    <em id="close_btn" title="關(guān)閉背景"></em> 
</div> 

CSS

還需要準(zhǔn)備大背景圖片，我們從網(wǎng)上找張大背景圖拿來(lái)用，用CSS做簡(jiǎn)單的頁(yè)面布局。

復(fù)制代碼代碼如下:

*{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后，頁(yè)面還沒(méi)有什么效果，我們需要使用javascript來(lái)加載背景圖片。
Javascript
當(dāng)?shù)谝淮渭虞d頁(yè)面時(shí)（這時(shí)還沒(méi)有設(shè)置cookie等），當(dāng)然要把背景圖片加載，顯示完整的頁(yè)面效果。當(dāng)我們點(diǎn)擊“關(guān)閉”按鈕時(shí)，這個(gè)時(shí)候Javascript會(huì)把頁(yè)面已經(jīng)加載的背景圖片干掉，即不顯示出來(lái)，并且設(shè)置cookie，通過(guò)cookie的過(guò)期時(shí)間來(lái)控制大背景圖片是否顯示。即當(dāng)下次刷新頁(yè)面時(shí)，如果cookie未過(guò)期，則不會(huì)加載大背景圖片，反之則加載大背景圖片，請(qǐng)看代碼：

復(fù)制代碼代碼如下:

$(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"); 
    } 
    //點(diǎn)擊關(guān)閉 
    $("#close_btn").click(function(){ 
        $("body,html").css("background","none"); 
        $("#close_btn").hide(); 
        setCookie("mainbg","0"); 
    }); 
}) 

很顯然，我們是通過(guò)設(shè)置頁(yè)面元素的CSS背景background屬性來(lái)控制背景圖的加載，并且通過(guò)getCookie()和setCookie()兩個(gè)自定義函數(shù)來(lái)讀取和設(shè)置cookie的。

復(fù)制代碼代碼如下:

//設(shè)置cookie 
function setCookie(name,value){ 
    var exp = new Date();  
    exp.setTime(exp.getTime() + 1*60*60*1000);//有效期1小時(shí) 
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString(); 
} 
//取cookies函數(shù) 
function getCookie(name){ 
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); 
    if(arr != null) return unescape(arr[2]); return null; 
} 

您可能感興趣的文章: