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

每當重大節日期間，各大主流網站首頁會披上節日的盛裝，設計者一般會使用大幅背景圖片來獲得更好的視覺衝擊效果，當然，也要考慮到有些用戶不習慣這大背景圖，那麼在背景圖上放置「關閉」按鈕是有必要的，使用者只要點擊「關閉背景」按鈕，大幅背景圖將會消失。

我們使用javascript來控制背景圖片的顯示和隱藏，當點擊關閉按鈕時，控制CSS使頁面不加載背景圖，同時記錄COOKIE相關參數，並設定cookie的有效期，那麼在cookie有效期內刷新頁面，是不會再載入背景圖的，如果cookie失效，則又會重新載入背景圖片。

HTML

一般背景圖片的關閉按鈕都是放在頁面頭部的，我們在頁面的頂部放置關閉背景的按鈕，當然這個按鈕是做好的圖片。

複製程式碼 程式碼如下:

CSS 還需要準備大背景圖片，我們從網路上找張大背景圖拿來用，用CSS做簡單的頁面佈局。

 



複製程式碼

程式碼如下:

*{margin:0pad; >body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"5b8b4f53", sans-serif;}
#top{clear:both;width:1000px;height:60putox; ;overflow:hidden;position:relative;}
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer;
display:block;bottom:25px;cursor:pointer;

display:block;bottom:25px;cursor:pointer; display:block;z-index :2;} 部署完了css後，頁面還沒有什麼效果，我們需要使用javascript來載入背景圖片。 Javascript

第一次載入頁面時（這時還沒有設定cookie等），當然要把背景圖片加載，顯示完整的頁面效果。當我們點選「關閉」按鈕時，這個時候Javascript會把頁面已經載入的背景圖片幹掉，也就是不顯示出來，並且設定cookie，透過cookie的過期時間來控制大背景圖片是否顯示。即下次刷新頁面時，如果cookie未過期，則不會載入大背景圖片，反之則載入大背景圖片，請看代碼：

 



複製代碼


代碼如下:


$(function(){
    if(getCookie("mainbg")==0){         $("#close_btn").hide();
    }else{
  ) $. "background","url(images/body_bg.jpg)) no-repeat 50% 0");
        $("html").css("background","url(images/html_bg.jpg) html").css("background","url(images/html_bg.jpg) 5eat-rep- x 0 0");
        $("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat") /點選關閉

    $("#close_btn").click(function(){         $("body,html").cs  close_btn").hide();

        setCookie("mainbg","0");
    });
})

很顯然，我們是透過設定頁面元素的CSS背景background屬性來控制背景圖的加載，並且透過getCookie()和setCookie()兩個自訂函數來讀取和設定cookie的。  

複製程式碼


程式碼如下:


//設定/設定值(name,value){
    var exp = new Date(); 
    exp.setTime(exp.getTime() 1*60*60*1000);//有效期限1小時
 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; }