快捷導(dǎo)航

js仿百度切換皮膚功能（html+css）

更新時(shí)間：2016年07月10日 14:14:49 作者：wangwangwangMax

這篇文章主要為大家詳細(xì)介紹了JavaScript仿百度切換皮膚功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

js仿百度切換皮膚效果：(換膚出來(lái)一個(gè)div，選擇你想要的圖片，作為網(wǎng)頁(yè)背景，保存)

要點(diǎn)：cookie保存狀態(tài)
html代碼:

<body>
 <div id="header">
 <div id="header_con">
  <div class="dbg"><a href="javascript:;" onclick="showImgBox()">換膚</a></div>
 </div>
 </div>
 
 <div id="dimgBox">
 <div id="dimgtitle">
  <div id="imgtitle_con">
  <div id="title1"><a href="javascript:;">熱門</a></div>
  <div id="title2"><a href="javascript:;" onclick="hideImgBox()">收起</a></div>
  </div>
 </div>
 <div id="imglist">
  <div class="imgitem"><img src="image/bg0.jpg" /></div>
  <div class="imgitem"><img src="image/bg1.jpg" /></div>
  <div class="imgitem"><img src="image/bg2.jpg" /></div>
  <div class="imgitem"><img src="image/bg3.jpg" /></div>
  <div class="imgitem"><img src="image/bg4.jpg" /></div>
 </div>
 </div>
</body>

css代碼:

* {
 margin:0px;
 padding:0px;
}
#header {
 height:40px;
 width:100%;
 background:#000000;
}

a {
 text-decoration:none;
}

.dbg {
 float:left;
}

#dimgBox {
 width:100%;
 height:140px;
 /*position:absolute;*/
 background:#ffffff;
 top:0px;
 left:0px;
 display:none;
}
#dimgtitle {
 height:40px;
 width:100%;
 border-bottom:solid 1px #ccc;
}
#imgtitle_con {
 width:1180px;
 height:40px;
 margin:0px auto;
 line-height:40px;
}
#title1 {
 float:left;
}
#title1 a {
 display:block;
 background:#04a6f9;
 height:40px;
 color:#ffffff;
 text-align:center;
}
#title2 {
 float:right;
}
#imglist {
 height:65px;
 width:1180px;
 margin: 0px auto;
}
.imgitem {
 float:left;
 margin-top:10px;
 margin-left:5px;
}
.imgitem img {
 width:100px;
}

js代碼：

function showImgBox()
{
 $("#dimgBox").slideDown();
}
function hideImgBox()
{
 $("#dimgBox").slideUp();
}


$(function ()
{
 //5.頁(yè)面打開之后判斷它是否存在
 if ($.cookie("bg-pic") == "" || $.cookie("bg-pic")==null)
 {
 //6.不存在就把第一張?jiān)O(shè)為默認(rèn)背景
 $("body").css("background-image", "url(image/bg0.jpg)");
 }
 else
 {
 //6.如果存在就把$.cookie("bg-pic")傳進(jìn)去,上一次保存的值給它
 $("body").css("background-image", "url('" + $.cookie("bg-pic") + "')");
 //
 }
 //1.找到imgtiem下面的img標(biāo)簽，執(zhí)行單擊事件
 $(".imgitem img").click(function ()
 {
 //2.關(guān)鍵是要獲取到當(dāng)前圖片的src的值,設(shè)為變量保存起來(lái)
 var src = $(this).attr("src");
 //3.把它作為網(wǎng)頁(yè)的背景樣式
 $("body").css("background-image","url('"+src+"')");
 //4.保存狀態(tài)
 $.cookie("bg-pic", src, {expires:1});
 });
});

效果圖：