首頁 > web前端 > js教程 > 使用javascript控制cookie顯示和隱藏背景圖_javascript技巧

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

WBOY
發布: 2016-05-16 17:00:19
原創
1327 人瀏覽過

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

我們使用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");
    });
})



複製程式碼


程式碼如下:


//設定/設定值(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; }
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板