Example analysis of combining Bootstrap framework with jQuery to emulate Baidu skin changing function

The application of the skinning function is very extensive. Whether it is the search interface or ordinary management interface, etc., the skinning function can be designed and applied to provide a better user experience.　

Today, I imitated Baidu's skinning function and implemented the basic skinning function. In the process of designing the interface, I adopted the Bootstrap framework to better adapt to the screen. (Of course, it is also to better familiarize myself with this framework, so don't forget to import the Bootstrap framework's css and js packages). It is best to separate css, js, and images when creating a project.　

Firstly, it is the layout. I just laid out a simple skin interface, which includes some buttons and images. To simplify the implementation, the background images for skinning are selected directly, and the ul li tags are used for direct layout. Of course, the original div layout can also be used.　

<div class="container">-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">Treasure Box</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">Change Skin</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">Message</a></div>
 </div>
 <div class="s-icons">
 <div class="s-icons-bottom">
  <div class="icon-items">
  <ul>
   <li><a href="javascript:;">Popular</a></li>
   <li><a href="javascript:;">Game</a></li>
   <li><a href="javascript:;">Cartoon</a></li>
   <li><a href="javascript:;">Celebrity</a></li>
   <li><a href="javascript:;">Scenery</a></li>
   <li><a href="javascript:;">Simple</a></li>
   <li><a href="javascript:;">Elegant</a></li>
   <li><a href="javascript:;">Custom</a></li>
  </ul>
  </div>
  <div class="icon-up">
  <div>
   <i class="glyphicon glyphicon-arrow-up"></i>
   <a href="javascript:;">Fold</a>
  </div>
  </div>
  <div style="clear: both"></div>
  <div class="icon-bottom">
  <ul>
   <li class="col-lg-1 col-lg-offset-1 dpic><img src="images/0.jpeg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/1.jpeg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/2.png" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/3.jpg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/4.jpg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/5.jpg" title="[#1#]\/li>
   <li class="col-lg-1 dpic><img src="images/6.jpeg" title="[#1#]\/li>
  </ul>
  </div>
 </div>
 </div>

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

Attach the 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 #b-change,.b-icons #b-msg{
 margin-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{
 height: 30px;
 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 quite important, that is, how to write jQuery code to implement the image switch.

When clicking on the skin change, a interface will be switched, which contains the classification of skins and the collapse button. When the collapse button is clicked, the interface will have a collapse effect. To implement this function, there isThree methodsYou can choose one method yourself:　

1)slidedown() and slideup();　

2)show() and hide();　

3)fadeOut() and fadeIn().　

Here I prefer the second method, so the second method is used in the code.　

How to switch the background image by clicking on the image? In fact, it only involves style handling, that is, how to change the background image, and the display problem of the background image. Then the question comes, how to get the current clicked or selected image? You can get the image path by getting the src attribute of img, and jQuery can use the attr() method to obtain it. That is:　

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

this represents the current mouse-clicked image object.

In order to refresh the page without changing the background image, I adopted html5stored in localStorage, the most commonly used method is getItem() and setItem() method:　

var bgig = localStorage.getItem("bgig");

localStorage.setItem("bgig", src);

The implementation process 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(500);
 });
 $(".icon-up a").click(function () {
 $(".s-icons").hide(500);
 });
 $(".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);
 });
});

Illustration:

That's all for this article, I hope it will be helpful to your study, and I also hope everyone will support and cheer for the tutorial.

If you want to study in depth, you can click here to learn more, and I will also attach two excellent topics for you: Bootstrap Learning Tutorial Bootstrap Practical Tutorial

Statement: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to notice#w3Please report any violations by sending an email to codebox.com (replace # with @ when sending email), and provide relevant evidence. Once verified, this site will immediately delete the infringing content.