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