JS imitation baidu Switch Skin effect: (skin out a div, choose the picture you want, as the background of the page, save)
Important:Cookie Save Status
HTML code:
<body> <div id= "header" > <div id= "Header_con" > <div class= "dbg "><a href=" javascript:; "onclick=" Showimgbox () > Skin </a></div> </div> </div> <div Id= "Dimgbox" > <div id= "dimgtitle" > <div id= "Imgtitle_con" > <div id= "title1" ><a href= "Javascri" PT:; " > Popular </a></div> <div id= "title2" ><a href= "javascript:;" onclick= "Hideimgbox ()" > Close </a ></div> </div> </div> <div id= "imglist" > <div class= "imgitem" ></div> <div class= imgitem" ></div> <div class= "IMGI Tem "></div> <div class=" Imgitem "> </div> <div class= "Imgitem" ></div> </div> </div> </ Body>
CSS code:
* {
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 Code:
function Showimgbox ()
{
$ ("#dimgBox"). Slidedown ();
function Hideimgbox ()
{
$ ("#dimgBox"). Slideup ();
$ (function ()
{
//5. When the page is opened, determine if it exists
if ($.cookie ("bg-pic") = = "" | | $.cookie ("Bg-pic") ==null)
{
//6. Does not exist the first is set to the default background
$ ("body"). CSS ("background-image", "url (image/ bg0.jpg) ");
}
else
{
//6. If present, $.cookie ("Bg-pic") is passed in, and the last saved value gives it
$ ("body"). CSS ("background-image", "url" + $. Cookie ("bg-pic") + "')";
//1. Locate the IMG tag under Imgtiem and perform a click event
$ (". Imgitem img"). Click (function ()
{
//2. The key is to get to the current picture of the SRC value, set to save the variable
var src = $ (this). attr ("src");
3. Use it as the background style of the Web page
$ ("body"). CSS ("background-image", "url (' +src+ ')");
4. Save state
$.cookie ("Bg-pic", SRC, {expires:1});
});
Effect Chart:
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Author: Wangwangwangmax
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
