Bootstrap framework combined with jquery imitation Baidu skin-changing Function example analysis _javascript skills

The application of skin-changing function is very wide, whether it is the search interface or the ordinary management interface, etc., can be designed and apply the skin-changing function, play a better user experience.

Today, The imitation of Baidu's skin function, the realization of the basic skin function, the next will be introduced to you how to achieve. In the process of designing the interface, I used the bootstrap framework to better fit the screen. (Of course also in order to better understand the use of this framework, we do not forget to put the bootstrap framework of CSS and JS package introduced to OH). When you create a project, it is best to separate CSS, JS, images.

First is the layout, I just layout a little skin change interface, which is a number of buttons and pictures, in order to achieve simple, so the background image of the skin is directly selected, the use of UL li Tag Direct layout, of course, can also use the original div layout.

<div class= "Container-fluid b-icons" > <div class= "B-icons-item" id= "B-box" ><a "javascript:;" > Treasure Box </a></div> <div class= "B-icons-item" id= "B-change" ><a "javascript:;" > Skin </a></div> <div class= "B-icons-item" id= "b-msg" ><a "javascript:;" > News </a></div> </div> <div class= "s-icons" > <div class= "s-icons-bottom" > <div clas s= "Icon-items" > <ul> <li><a href= "javascript:;" > Popular </a></li> <li><a href= "javascript:;" > Games </a></li> <li><a href= "javascript:;" > Cartoon </a></li> <li><a href= "javascript:;" > Star </a></li> <li><a href= "javascript:;" > Landscape </a></li> <li><a href= "javascript:;" > Simplicity </a></li> <li><a href= "javascript:;" > Small fresh </a></li> <li><a href= "javascript:;" > Custom </a></li> </ul> </div> <div class= "icon-up" > <div> <i class= "Glyphicon glyphicon-arrow-up" >&lt ;/i> <a href= "javascript:;" > Collection </a> </div> </div> <div style= "Clear:both" ></div> <div class= "Icon-bottom" > <ul> <li class= "col-lg-1 col-lg-offset-1 dpic" ></li&gt
   ; <li class= "Col-lg-1 dpic" ></li> <li class= "Col-lg-1 dpic" & Gt;</li> <li class= "col-lg-1 dpic" ></li> <li class= "col-lg-1 dpic" ></li> Li class= "col-lg-1 dpic" ></li> <li class= "Col-lg-1 dpic" >& Lt;img src= "Images/6.jpeg" title= "background map" ></li> </ul> </div> </div> </div>

Next is how to decorate the appearance, I prefer the simple interface.

Attach CSS code:

*{margin:0px;
 padding:0px;
font-family: "Microsoft Yahei", Helvetica, Sans-serif, Lato;
 }. b-icons{Background-color: #569caa;
 height:32px;
line-height:32px; }. b-icons. b-icons-item{float:left; b-icons #b-box{margin-left:10%; b-icons-change,.b-icons #b-msg{#b Margi
n-left:20px; B-icons #b-box,.b-icons #b-change,.b-icons #b-msg{text-decoration:underline; b-icons #b-box a,.b-icons #b-change A
 ,. B-icons #b-msg a{font-size:12px;
Color: #fff;
 }. s-icons{width:100%;
 position:fixed;
 left:0px;
 top:0px;
 Background-color: #fff;
 height:175px;
Display:none;
 }. s-icons. s-icons-bottom{width:100%;
 height:35px;
border-bottom:1px solid #808080;
 }. s-icons. icon-items{margin-left:15%; s-icons. Icon-items>ul li{;
 line-height:30px;
 Float:left;
 List-style:none;
 margin-left:10px;
margin-right:10px;
 S-icons. Icon-items a{color: #666; s-icons. icon-up{line-height:30px;
 Float:right; margin-right:10%}. s-icons. ICon-up>div a,.s-icons. Icon-up>div i{color: #2544ff; s-icons. icon-bottom{width:100%;
 height:100px;
 margin-left:15%;
margin-top:20px;
 }. s-icons. icon-bottom dpic{Text-align:center;
 List-style:none;
margin-left:5px;
 }. s-icons. icon-bottom dpic img{width:120px;
height:80px;

 }

The last part is more important, that is, how to write jquery code to achieve the switch of the picture.

In the click of the skin, will switch an interface, which contains the classification of the skin and the button, when the click to close, the interface will have the effect of collecting, want to achieve this function, there are three ways , you can choose a way:

1) Slidedown () and Slideup ();

2 show () and hide ();

3) fadeout () and Fadein ().

Here I prefer the second way, so the code uses the second way.

Click on the picture how to achieve the background image can be switched, in fact, just involves a style of processing, that is, how to change the background picture, as well as a background picture of a display problem. So the question is, how to get the currently clicked or Selected picture, you can get the SRC attribute in img to obtain the path of the picture, jquery can use the attr () method to obtain. That

var src = $ (this). attr ("src");

This represents the object of the current mouse-click picture.

In order to refresh the page without changing the background picture, I used the HTML5 localstorage for storage, and this method is most commonly used for GetItem () and SetItem () methods:

var bgig = Localstorage.getitem ("bgig");

Localstorage.setitem ("Bgig", SRC);

The implementation of the entire function is as follows:

 $ (function () {
 var bgig = Localstorage.getitem ("bgig");
 if (bgig = = null) {
 $ ("body"). CSS ({"background-image": "url (images/1.jpeg)", "Background-size": "Cover"});
 }
 else {
 $ ("body"). CSS ({"background-image": "url (" + bgig +) "," Background-size ":" Cover "});

 $ ("#b-change a"). Click (function () {
 $ (". S-icons"). Show (+);
 $ (". icon-up a"). Click (function () {
 $ (". S-icons"). Hide (+);

 $ (". Dpic img"). Click (function () {
 var src = $ (this). attr ("src");
 $ ("Body"). CSS ({"background-image": "url (" + src + ")", "Background-repeat": "No-repeat", "background-size": "100%"});
 Localstorage.setitem ("Bgig", SRC);
 });

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.

If you still want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap practical tutorials