Análise de exemplo de função de troca de pele do Baidu integrada ao framework Bootstrap com jQuery

A aplicação da função de troca de skin é ampla, seja na interface de busca ou na interface de gestão comum, etc., pode ser projetada e aplicada a função de troca de skin para melhorar a experiência do usuário.　

Hoje, imitando a função de troca de skin do Baidu, realizei a função básica de troca de skin e, em seguida, apresentarei como realizá-la. No processo de design da interface, usei o framework Bootstrap para melhor adaptação da tela. (Claro, também é para melhor familiarização com o uso deste framework, não se esqueça de importar o pacote css e js do Bootstrap framework). No processo de criação do projeto, é melhor separar css, js e images.　

Primeiro, é a disposição, apenas configurei uma interface simples de troca de skin, que contém alguns botões e imagens. Para implementação simples, as imagens de fundo da troca de skin são selecionadas diretamente, usando diretamente os rótulos ul li para layout. Claro, também pode usar o layout original div.　

<div class="container">}-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">Caixa</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">Mudar de pele</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">Mensagem</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:;">Jogo</a></li>
   <li><a href="javascript:;">Cartoon</a></li>
   <li><a href="javascript:;">Famoso</a></li>
   <li><a href="javascript:;">Paisagem</a></li>
   <li><a href="javascript:;">Simples</a></li>
   <li><a href="javascript:;">Claro</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:;">Recolher</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 seguir, como modificar a aparência, prefiro interfaces simples.

Anexar o 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;
}

A última parte é muito importante, ou seja, como escrever o código jQuery para alternar imagens.

Quando clicar em mudar de pele, uma interface será alternada, que contém categorias de pele e botão de recolher. Quando clicar em recolher, a interface terá o efeito de recolher. Para implementar essa função, háTrês maneirasPode escolher um modo a seu gosto:　

1)slidedown() e slideup();　

2)show() e hide();　

3)fadeOut() e fadeIn().　

Aqui, eu gosto mais do segundo método, então o código usa o segundo método.　

Como clicar na imagem para que a imagem de fundo possa ser alternada? Na verdade, isso envolve apenas o processamento de estilo, ou seja, como alterar a imagem de fundo e um problema de exibição de imagem de fundo. Então, a pergunta é, como obter a imagem clicada ou selecionada atualmente? Pode-se obter o atributo src da img, assim obter o caminho da imagem, o jQuery pode usar o método attr() para obter. A saber:　

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

this representa o objeto de imagem clicado atualmente pelo mouse.

Para atualizar a página sem alterar a imagem de fundo, usei html5do localStorage para armazenamento, o método mais comum é getItem() e setItem() métodos:　

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

localStorage.setItem("bgig", src);

O processo de implementação da função completo é o seguinte:

 $(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);
 });
});

Efeito visual:

Isso é tudo sobre este artigo, esperamos que ajude na sua aprendizagem e que você apoie mais o tutorial gritar.

Se você ainda quiser aprofundar seus conhecimentos, pode clicar aqui para estudar e, além disso, vamos oferecer dois tópicos excelentes: Tutorial de Estudo Bootstrap Tutorial de Aplicação Bootstrap

Declaração: O conteúdo deste artigo é proveniente da internet, pertence ao respectivo proprietário, foi contribuído e carregado voluntariamente pelos usuários da internet, este site não possui direitos de propriedade, não foi editado artificialmente e não assume responsabilidades legais relevantes. Se você encontrar conteúdo suspeito de violação de direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)