Análisis de ejemplo de implementación de función de cambio de skin de Baidu combinando el marco Bootstrap y jQuery

La aplicación de la función de cambio de apariencia es muy amplia, ya sea en la interfaz de búsqueda o en la interfaz de gestión común, etc., se puede diseñar y aplicar la función de cambio de apariencia para mejorar la experiencia del usuario.　

Hoy imitando la función de cambio de apariencia de Baidu, he implementado la función básica de cambio de apariencia. A continuación, les presentaremos cómo hacerlo. En el proceso de diseño de la interfaz, utilicé el framework Bootstrap para adaptarse mejor a la pantalla. (Por supuesto, también es para familiarizarme mejor con este framework, no olviden importar los paquetes css y js de Bootstrap). Es mejor separar css, js e imágenes al crear el proyecto.　

Primero es el diseño, solo he diseñado una interfaz simple de cambio de apariencia, que contiene algunos botones e imágenes. Para una implementación sencilla, las imágenes de fondo de cambio de apariencia se seleccionan directamente, utilizando etiquetas ul li para el diseño. Por supuesto, también se puede usar el diseño original de div.　

<div class="container">-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">Caja</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">Cambiar</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">Mensaje</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:;">Juego</a></li>
   <li><a href="javascript:;">Cartoon</a></li>
   <li><a href="javascript:;">Famoso</a></li>
   <li><a href="javascript:;">Paisaje</a></li>
   <li><a href="javascript:;">Sencillo</a></li>
   <li><a href="javascript:;">Cerca</a></li>
   <li><a href="javascript:;">Personalizar</a></li>
  </ul>
  </div>
  <div class="icon-up">
  <div>
   <i class="glyphicon glyphicon-arrow-up"></i>
   <a href="javascript:;">Contraer</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>

A continuación, cómo decorar la apariencia, prefiero una interfaz simple.

Adjunte el código CSS:　

*{
 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;
}

La última parte es bastante importante, es decir, cómo escribir código jQuery para cambiar las imágenes.

Al hacer clic en cambiar de apariencia, se cambia una interfaz que contiene las categorías de piel y el botón de plegado. Cuando se hace clic en plegar, la interfaz tiene un efecto de plegado. Para implementar esta función, hayTres métodospuede elegir uno de los siguientes métodos:　

1)slidedown() y slideup();　

2)show() y hide();　

3)fadeOut() y fadeIn().　

Aquí prefiero el segundo método, por lo que el código utiliza el segundo método.　

¿Cómo cambiar la imagen de fondo al hacer clic en la imagen? En realidad, solo se trata de un tratamiento de estilo, es decir, cómo cambiar la imagen de fondo y un problema de visualización de la imagen de fondo. Entonces, ¿cómo obtener la imagen actual al hacer clic o seleccionar? Se puede obtener la ruta de la imagen a través de la propiedad src de img, y jQuery puede obtenerla mediante el método attr(). Es decir:　

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

this representa el objeto de imagen de ratón actual.

Para que el cambio de página no cambie la imagen de fondo, he utilizado html5se almacena en localStorage, el método más comúnmente utilizado es getItem() y setItem():　

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

localStorage.setItem("bgig", src);

El proceso de implementación de toda la función es el siguiente:

 $(function () {
 var bgig = localStorage.getItem("bgig");
 if (bgig == null) {}}
 $("body").css({ "fondo-imagen": "url(images/1.jpeg)", "fondo-tamaño": "cubrir" });
 }
 else {
 $("body").css({ "fondo-imagen": "url(" + bgig + ")", "fondo-tamaño": "cubrir" });
 }
 $("#b-cambiar a").click(function () {
 $(".s-iconos").show(500);
 });
 $(".icon-subir a").click(function () {
 $(".s-iconos").hide(500);
 });
 $(".dpic img").click(function () {
 var src = $(this).attr("src");
 $("body").css({ "fondo-imagen": "url(" + src + ")","fondo-repetir":"no",-repetir","fondo-tamaño":"100%" });
 localStorage.setItem("bgig", src);
 });
});

Imágenes de ejemplo：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

Si还想深入学习，可以点击此处进行学习，再为大家附上两个精彩的专题：Tutorial de aprendizaje de Bootstrap Tutorial de práctica de Bootstrap

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido ha sido contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.