Beispiel zur Implementierung der Baidu-Skin-Wechselfunktion mit Bootstrap-Framework und jQuery

Die Anwendung der Oberflächenauswahl ist weit verbreitet, sei es die Suchoberfläche oder die allgemeine Verwaltungsoberfläche usw., die Oberflächenauswahl kann gestaltet und angewendet werden, um eine bessere Benutzererfahrung zu gewährleisten.　

Heute habe ich die Oberflächenauswahl von Baidu nachgeahmt und die grundlegende Oberflächenauswahl implementiert. In Kürze werde ich Ihnen zeigen, wie man dies umsetzt. Während des Designprozesses habe ich das Bootstrap-Framework verwendet, um eine bessere Anpassung an den Bildschirm zu gewährleisten. (Natürlich auch, um besser mit diesem Framework vertraut zu werden, vergessen Sie nicht, die CSS- und JS-Pakete von Bootstrap einzubinden). Es ist am besten, CSS, JS und Bilder bei der Erstellung eines Projekts getrennt zu speichern.　

Zunächst geht es um die Layoutgestaltung, ich habe nur eine einfache Oberflächenauswahl gestaltet, darunter befinden sich einige Schaltflächen und Bilder. Um die einfache Implementierung zu erreichen, wurden die Hintergrundbilder der Oberflächenauswahl direkt ausgewählt und mit ul li-Tag direkt gestaltet. Natürlich kann auch die ursprüngliche div-Gestaltung verwendet werden.　

<div class="container">}-fluid b-icons">
 <div class="b-icons-item" id="b-box"><a href="javascript:;">Schatzkiste</a></div>
 <div class="b-icons-item" id="b-change"><a href="javascript:;">Wechsel der Haut</a></div>
 <div class="b-icons-item" id="b-msg"><a href="javascript:;">Nachricht</a></div>
 </div>
 <div class="s-icons">
 <div class="s-icons-bottom">
  <div class="icon-items">
  <ul>
   <li><a href="javascript:;">Beliebt</a></li>
   <li><a href="javascript:;">Spiel</a></li>
   <li><a href="javascript:;">Cartoon</a></li>
   <li><a href="javascript:;">Stern</a></li>
   <li><a href="javascript:;">Landschaft</a></li>
   <li><a href="javascript:;">Elegant</a></li>
   <li><a href="javascript:;">Einfach</a></li>
   <li><a href="javascript:;">Benutzerdefiniert</a></li>
  </ul>
  </div>
  <div class="icon-up">
  <div>
   <i class="glyphicon glyphicon-arrow-up"></i>
   <a href="javascript:;">Einklappen</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>

Nächste ist die Anpassung des Aussehens, ich mag einfache Oberflächen.

Befügen Sie den folgenden CSS-Code hinzu：　

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

Das letzte Teil ist sehr wichtig, nämlich wie man jQuery-Code zum Wechsel der Bilder schreibt.

Beim Wechseln der Oberfläche wird eine Oberfläche gewechselt, die die Kategorien der Oberfläche und die Schließtaste enthält. Wenn man auf Schließen klickt, hat die Oberfläche eine Schließeffekt. Um diese Funktion zu realisieren, gibt esDrei MethodenMan kann selbst eine Methode auswählen:　

1)slidedown() und slideup();　

2)show() und hide();　

3)fadeOut() und fadeIn().　

Ich bevorzuge hier die zweite Methode, daher wird im Code die zweite Methode verwendet.　

Wie kann man die Änderung des Hintergrundbilds durch Klick auf ein Bild erreichen? Es geht dabei um die Bearbeitung eines Stils, d.h. wie man das Hintergrundbild ändert und wie es angezeigt wird. Die Frage ist, wie man das aktuelle angeklickte oder gewählte Bild erhält? Man kann dies durch das Erhalten des src-Attributs des img erreichen, um den Bildpfad zu erhalten, und jQuery kann dies mit dem attr()-Methoden tun. Dies bedeutet:　

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

this bezieht sich auf das aktuelle Mausklickbild.

Um sicherzustellen, dass das Hintergrundbild bei der Aktualisierung der Seite nicht geändert wird, habe ich html verwendet5wird in localStorage gespeichert, der häufigste verwendete Methoden sind getItem() und setItem():　

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

localStorage.setItem("bgig", src);

Der gesamte Implementierungsprozess der Funktion ist wie folgt:

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

Detaillierte Darstellung:

Das ist der Schluss dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir hoffen, dass Sie die呐喊教程 mehr unterstützen.

Wenn Sie noch tiefer in das Thema eintauchen möchten, können Sie hier weiter lernen. Hier sind zwei spannende Themen für Sie hinzugefügt: Bootstrap-Lern-Tutorial Bootstrap-Praxis-Tutorial

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtlichem Inhaber. Der Inhalt wurde von Internetnutzern freiwillig und eigenständig hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Diese Website übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie urheberrechtlich anstößige Inhalte entdecken, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald überprüft, wird diese Website die beanstandeten urheberrechtlichen Inhalte sofort löschen.