DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 使用javascript控制cookie顯示和隱藏背景圖
使用javascript控制cookie顯示和隱藏背景圖
編輯:JavaScript綜合知識     

 本文主要介紹了使用javascript來控制背景圖片的顯示和隱藏,當點擊關閉按鈕時,控制CSS使頁面不加載背景圖,同時記錄COOKIE相關參數,並設置cookie的有效期

每當重大節日期間,各大主流網站首頁會披上節日的盛裝,設計者一般會使用大幅背景圖片來獲得更好的視覺沖擊效果,當然,也要考慮到有些用戶不習慣這大背景圖,那麼在背景圖上放置“關閉”按鈕是有必要的,用戶只要點擊“關閉背景”按鈕,大幅背景圖將會消失。   我們使用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,"5b8b4f53", 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;  }   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved