Baidu skin replacement and skin replacement
Effect: (skin a div, select the image you want, and save it as the webpage background)
Key Point: cookie saving status
Html code:
1 <body> 2 <div id = "header"> 3 <div id = "header_con"> 4 <div class = "dbg"> <a href = "javascript :; "onclick =" showImgBox () "> skin change </a> </div> 5 </div> 6 </div> 7 8 <div id =" dimgBox "> 9 <div id =" dimgtitle "> 10 <div id = "imgtitle_con"> 11 <div id = "title1"> <a href = "javascript :; "> popular </a> </div> 12 <div id =" title2 "> <a href =" javascript:; "onclick =" hideImgBox () "> collapse </a> </div> 13 </div> 14 </div> 15 <div id =" imglist "> 16 <div class =" imgitem "> </div> 17 <div class = "imgitem"> </div> 18 <div class = "imgitem"> </div> 19 <div class = "imgitem"> </div> 20 <div class = "imgitem"> </div> 21 </div> 22 </div> 23 </body>
Css code:
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 Code:
1 function showImgBox () 2 {3 $ ("# dimgBox "). slideDown (); 4} 5 function hideImgBox () 6 {7 $ ("# dimgBox "). slideUp (); 8} 9 10 11 $ (function () 12 {13 // 5. after the page is opened, determine whether it has 14 if ($. cookie ("bg-pic") = "" | $. cookie ("bg-pic") = null) 15 {16 // 6. if it does not exist, set the first image as the default background 17 $ ("body" ).css ("background-image", "url (image/bg0.jpg )"); 18} 19 else20 {21 // 6. if yes, set $. cookie ("bg-pic"). The last saved value is 22 $ ("body" ).css ("background-image", "url ('" + $. cookie ("bg-pic") + "'); 23 // 24} 25 // 1. locate the img tag under imgtiem and click event 26 $ (". imgitem img "). click (function () 27 {28 // 2. the key is to get the src value of the current image and save it as a variable. 29 var src = $ (this ). attr ("src"); 30 // 3. use it as the background style of the webpage 31 $ ("body" ).css ("background-image", "url ('" + src + "')"); 32 // 4. save status 33 $. cookie ("bg-pic", src, {expires: 1}); 34}); 35 });
:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
