Esempio di analisi della funzione di cambio di pelle di Baidu combinata con il framework Bootstrap e jQuery

L'applicazione della funzione di cambio aspetto è molto ampia, sia nell'interfaccia di ricerca che nelle interfacce di gestione normali, ecc., può essere progettata e applicata la funzione di cambio aspetto per migliorare l'esperienza utente.　

Oggi ho imitato la funzione di cambio aspetto di Baidu e ho implementato la funzione di base di cambio aspetto. In seguito, vi introdurrò come implementarla. Durante il processo di progettazione dell'interfaccia, ho utilizzato il framework Bootstrap per adattarsi meglio agli schermi. (Naturalmente, anche per familiarizzare meglio con questo framework, non dimenticate di includere i pacchetti css e js di Bootstrap). È meglio separare css, js e immagini quando si crea un progetto.　

Prima di tutto, la layout, ho solo configurato una semplice interfaccia di cambio aspetto, tra cui alcuni pulsanti e immagini. Per un implementazione semplice, le immagini di sfondo del cambio aspetto sono selezionate direttamente, utilizzando direttamente i tag ul li per la layout. Certo, può anche essere utilizzata la layout originale con div.　

<div class="container-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">Cassaforte</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">Cambia Aspetto</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">Messaggio</a></div>
 </div>
 <div class="s-icons">
 <div class="s-icons-bottom">
  <div class="icon-items">
  <ul>
   <li><a href="javascript:;">In Evidenza</a></li>
   <li><a href="javascript:;">Popolare</a></li>
   <li><a href="javascript:;">Gioco</a></li>
   <li><a href="javascript:;">Cartone Animato</a></li>
   <li><a href="javascript:;">Celebrità</a></li>
   <li><a href="javascript:;">Paisaggio</a></li>
   <li><a href="javascript:;">Semplice</a></li>
   <li><a href="javascript:;">Personalizzato</a></li>
  </ul>
  </div>
  <div class="icon-up">
  <div>
   <i class="glyphicon glyphicon-arrow-up"></i>
   <a href="javascript:;">Riassumere</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>

Prossimo è come abbellire l'aspetto, preferisco l'interfaccia semplice.

Includere il codice CSS:　

*{
 margine:0px;
 riempimento:0px;
 famiglia del carattere: "Microsoft Yahei", Helvetica, sans-serif, Lato;
}
.b-icons{
 colore di sfondo: #569caa;
 altezza: 32px;
 altezza della linea: 32px;
}
.b-icons .b-icons-item{
 flottante: sinistro;
}
.b-icons #b-box{
 margine sinistro: 10%;
}
.b-icons #b-change,.b-icons #b-msg{
 margine sinistro:20px;
}
.b-icons #b-box,.b-icons #b-change,.b-icons #b-msg{
 decorazione del testo: sottolineato;
}
.b-icons #b-box a,.b-icons #b-change a,.b-icons #b-msg a{
 dimensione del testo: 12px;
 colore:#fff;
}
.s-icons{
 width: 100%;
 posizione: fisso;
 sinistro: 0px;
 top:0px;
 colore di sfondo: #fff;
 altezza: 175px;
 visualizzazione: none;
}
.s-icons .s-icons-bottom{
 width: 100%;
 altezza: 35px;
 bordo inferiore: 1px solido #808080;
}
.s-icons .icon-items{
 margine sinistro:15%;
}
.s-icons .icon-items>ul li{
 altezza: 30px;
 line-height: 30px;
 flottante: sinistro;
 list-style: none;
 margine sinistro:10px;
 margine destro:10px;
}
.s-icons .icon-items a{
 colore:#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 parte finale è molto importante, ovvero come scrivere il codice jQuery per la transizione delle immagini.

Quando si clicca per cambiare la skin, si passa a una nuova interfaccia che contiene le categorie delle skin e il pulsante di ripiegamento. Quando si clicca su ripiegamento, l'interfaccia ha un effetto di ripiegamento. Per realizzare questa funzione, c'èTre metodiPuoi scegliere uno di questi metodi:　

1) slideDown() e slideUp();　

2) show() e hide();　

3) fadeOut() e fadeIn().　

In questo caso preferisco il secondo metodo, quindi il codice utilizza il secondo metodo.　

Come è possibile realizzare la transizione dell'immagine di sfondo cliccando sull'immagine? In realtà riguarda solo la gestione dello stile, ovvero come cambiare l'immagine di sfondo e come visualizzare l'immagine di sfondo. Allora, come ottenere l'immagine cliccata o selezionata correntemente? È possibile ottenere il percorso dell'immagine tramite l'attributo src dell'img, e jQuery può ottenerlo tramite il metodo attr(). Ecco come:　

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

this indica l'oggetto dell'immagine cliccata corrente.

Per aggiornare la pagina senza modificare l'immagine di sfondo, ho utilizzato il localStorage di html5 per memorizzare. Il metodo più comune è getItem() e setItem():　

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

localStorage.setItem("bgig", src);

L'implementazione dell'intera funzione è la seguente:

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

Immagine di esempio:

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua formazione, e ti preghiamo di sostenere fortemente il tutorial Shouting.

Se desideri approfondire ulteriormente, puoi fare clic qui per imparare, e ti forniamo due argomenti speciali: Tutorial di Bootstrap, Tutorial di Bootstrap in pratica

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, è di proprietà del rispettivo autore, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare, fornendo prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di copyright.