仿百度换肤

效果：(换肤出来一个div，选择你想要的图片，作为网页背景，保存)

要点：cookie保存状态

html代码:

 1 
 2     
"header">
 3         
"header_con">
 4             
class="dbg">"javascript:;" οnclick="showImgBox()">换肤
 5         
 6    
 7     
 8     
"dimgBox">
 9         
"dimgtitle">
10             
"imgtitle_con">
11                 
"title1">"javascript:;">热门
12                 
"title2">"javascript:;" οnclick="hideImgBox()">收起
13             
14         
15         
"imglist">
16             
class="imgitem">"image/bg0.jpg" />
17             
class="imgitem">"image/bg1.jpg" />
18             
class="imgitem">"image/bg2.jpg" />
19             
class="imgitem">"image/bg3.jpg" />
20             
class="imgitem">"image/bg4.jpg" />
21         
22     
23 

 

 css代码:

 1 * {
 2     margin:0px;
 3     padding:0px;
 4 }
 5 #header {
 6    height:40px;
 7    width:100%;
 8    background:#000000;
 9 }
10 
11 a {
12   text-decoration:none;
13 }
14 
15 .dbg {
16    float:left;
17 }
18 
19 #dimgBox {
20    width:100%;
21    height:140px;
22    /*position:absolute;*/
23    background:#ffffff;
24    top:0px;
25    left:0px;
26    display:none;
27 }
28 #dimgtitle {
29   height:40px;
30   width:100%;
31   border-bottom:solid 1px #ccc;
32 }
33 #imgtitle_con {
34   width:1180px;
35   height:40px;
36   margin:0px auto;
37   line-height:40px;
38 }
39 #title1 {
40    float:left;
41 }
42 #title1 a {
43     display:block;
44     background:#04a6f9;
45     height:40px;
46     color:#ffffff;
47     text-align:center;
48 }
49 #title2 {
50    float:right;
51 }
52 #imglist {
53   height:65px;
54   width:1180px;
55   margin: 0px auto;
56 }
57 .imgitem {
58   float:left;
59   margin-top:10px;
60   margin-left:5px;
61 }
62 .imgitem img {
63    width:100px;
64 }

 

js代码：

 1 function showImgBox()
 2 {
 3     $("#dimgBox").slideDown();
 4 }
 5 function hideImgBox()
 6 {
 7     $("#dimgBox").slideUp();
 8 }
 9 
10 
11 $(function ()
12 {
13     //5.页面打开之后判断它是否存在
14     if ($.cookie("bg-pic") == "" || $.cookie("bg-pic")==null)
15     {
16         //6.不存在就把第一张设为默认背景
17         $("body").css("background-image", "url(image/bg0.jpg)");
18     }
19     else
20     {
21         //6.如果存在就把$.cookie("bg-pic")传进去,上一次保存的值给它
22         $("body").css("background-image", "url('" + $.cookie("bg-pic") + "')");
23         //
24     }
25     //1.找到imgtiem下面的img标签，执行单击事件
26     $(".imgitem img").click(function ()
27     {
28         //2.关键是要获取到当前图片的src的值,设为变量保存起来
29         var src = $(this).attr("src");
30         //3.把它作为网页的背景样式
31         $("body").css("background-image","url('"+src+"')");
32         //4.保存状态
33         $.cookie("bg-pic", src, {expires:1});
34     });
35 });

 

 

效果图：

转载于:https://www.cnblogs.com/wangwangwangMax/p/5657425.html