Bootstrap framework combined with jQuery anti-Baidu skin replacement function instance parsing, bootstrapjquery

Bootstrap framework combined with jQuery anti-Baidu skin replacement function instance parsing, bootstrapjquery

The skin replacement function is widely used. You can design and apply the skin replacement function on both the search interface and common management interface to provide a better user experience.

Today, Baidu's skin replacement function is imitated to implement the basic skin replacement function. Next we will introduce how to implement it. In the design field, I adopted the Bootstrap framework to better adapt to the screen. (Of course, we also want to better familiarize ourselves with this framework. Don't forget to introduce the css and js packages of the Bootstrap framework ). It is best to separate css, js, and images when creating a project.

First, layout. I just laid out a simple skin-changing interface, including some buttons and images. For simple implementation, the background images for skin-changing are directly selected, the ul li label can be used for direct layout, and 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 chest </a> </div> <div class =" B-icons-item "id =" B-change "> <a href =" javascript :; "> skin change </a> </div> <div class =" B-icons-item "id =" B-msg "> <a href =" javascript :; "> message </a> </div> <div class =" s-icons "> <div class =" s-icons-bottom "> <div class = "icon-items"> <ul> <li> <a href = "javascript :; "> popular </a> </li> <a href =" javascript :; "> game </a> </li> <a href =" javascript :; "> cartoon </a> </li> <a href =" javascript :; "> Star </a> </li> <a href =" javascript :; "> landscape </a> </li> <a href =" javascript :; "> simplicity </a> </li> <a href =" javascript :; "> small fresh </a> </li> <a href =" javascript :; "> Custom </a> </li> </ul> </div> <div class =" icon-up "> <div> <I class =" glyphicon -arrow-up "> </I> <a href =" javascript :; "> collapse </a> </div> <div style =" clear: both "> </div> <div class =" icon-bottom "> <ul> <li class =" col-lg-1 col-lg-offset-1 dpic ">  </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">  </li> <li class = "col-lg-1 dpic">  </li> <li class =" col-lg-1 dpic ">  </li> </ul> </div>

Next is how to modify 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 important, that is, how to write jquery code to implement image switching.

When you click skin change, a page will be displayed, containing the skin classification and collapse buttons. When you click collapse, the interface will have the effect of collapse. To achieve this function, there areThree methods, You can choose one of the following methods:

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 can I switch between image clicking on a background image? In fact, it only involves processing a style, that is, how to change the background image and display the background image. Now, the question is, how can we get the currently clicked or selected image? We can get the path of the image by getting the src attribute in img. jquery can use attr () method. That is:

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

This indicates the object of the current mouse click image.

To refresh the page without changing the background image, I used the localStorage of html5 for storage. The most common methods are getItem () and setItem:

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

LocalStorage. setItem ("bgig", src );

The entire function is implemented 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); });});

:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.

If you want to learn more, click here to learn more. Then, we will attach two wonderful topics: Bootstrap learning tutorial Bootstrap practical tutorial.