JQuery-Navigationsschaltfläche drehen

Mit der Beliebtheit mobiler Geräte und responsivem Webdesign beginnen immer mehr Websites, rotierende Navigationsschaltflächen einzuführen, um das Benutzererlebnis zu verbessern. Im Vergleich zu herkömmlichen Navigationsmenüs ist diese Art von Navigationstaste einfacher, leichter zu bedienen und lässt sich besser an unterschiedliche Gerätegrößen anpassen.

In diesem Artikel erfahren Sie, wie Sie mit jQuery eine rotierende Navigationsschaltfläche erstellen, und stellen einige häufig verwendete Rotationsanimationseffekte und andere verwandte Techniken vor.

Schritt 1: HTML- und CSS-Layout

Zuerst müssen wir die Grundstruktur einer rotierenden Navigationsschaltfläche im HTML-Dokument erstellen:

<div class="rotate-btn">
  <span class="line line1"></span>
  <span class="line line2"></span>
  <span class="line line3"></span>
</div>

Hier erstellen wir ein div-Element, das drei span-Elemente enthält, um die drei Navigationsschaltflächen darzustellen gerade Linien. Wir verwenden CSS-Stile, um diese Elemente zu formatieren:

.rotate-btn {
  display: block;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
}

.line {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #000;
  transition: transform .3s ease-in-out;
}

.line1 {
  top: 0;
}

.line2 {
  top: 50%;
  transform: translateY(-50%);
}

.line3 {
  bottom: 0;
}

Im obigen CSS-Stil legen wir die Breite und Höhe der Spin-Navigationsschaltfläche auf 40 Pixel fest und geben ihre Position als relative Positionierung an. Gleichzeitig legen wir die Position und den Stil der drei Liniensegmente mithilfe der absoluten Positionierung fest. Hier ist zu beachten, dass wir das Transformationsattribut und das Übergangsattribut verwenden, um den Rotationsanimationseffekt zu erzielen.

Schritt 2: jQuery-Code hinzufügen

Als nächstes müssen wir jQuery verwenden, um interaktive Effekte hinzuzufügen. Wir fügen der HTML-Datei zunächst die jQuery-Bibliothek hinzu und schreiben dann den folgenden Code:

$(document).ready(function() {
  $('.rotate-btn').click(function() {
    $(this).toggleClass('active');
  });
});

Im obigen Code verwenden wir die ready-Methode von jQuery, um sicherzustellen, dass der Skriptcode nach dem Laden des Dokuments ausgeführt wird. Dann fügen wir in der Click-Methode ein Click-Ereignis für die Rotationsnavigationsschaltfläche hinzu, und wenn auf die Schaltfläche geklickt wird, verwenden wir die toggleClass-Methode, um die aktive Klasse der Schaltfläche umzuschalten.

Schritt 3: Animationseffekte hinzufügen

Um die Drehnavigationsschaltfläche lebendiger zu gestalten, können wir einige Stil- und Animationstechniken verwenden, um ihren visuellen Effekt zu verbessern. Hier sind einige gängige Rotationsanimationseffekte:

1. Einfacher Flip-Effekt

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(-45deg);
}

.rotate-btn.active .line2 {
  opacity: 0;
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(45deg);
}

In diesem Effekt verwenden wir das Rotationsattribut und das TranslateY-Attribut, um das Spiegeln und die Auf-Ab-Übersetzung der geraden Linie zu erreichen. Stellen Sie gleichzeitig die mittlere gerade Linie auf transparent ein, um einen versteckten Effekt zu erzielen.

2. Welleneffekt

.rotate-btn.active .line1 {
  transform: translateY(6px) rotate(45deg);
}

.rotate-btn.active .line2 {
  transform: rotate(-45deg);
}

.rotate-btn.active .line3 {
  transform: translateY(-6px) rotate(135deg);
}

Bei diesem Effekt stellen wir die erste und letzte gerade Linie so ein, dass sie sich jeweils um plus bzw. minus 45 Grad dreht, während sich die mittlere gerade Linie um die Mitte dreht.

3. Bounce-Effekt

.rotate-btn.active .line1 {
  transform: translateY(10px);
}

.rotate-btn.active .line2 {
  transform: scale(0.8);
}

.rotate-btn.active .line3 {
  transform: translateY(-10px);
}

Bei diesem Effekt verschieben wir die gerade Linie in vertikaler Richtung nach oben und unten, während wir die mittlere gerade Linie verkleinern.

Hier stellen wir nur drei Effekte vor. Tatsächlich gibt es viele Arten von Animationseffekten für rotierende Navigationsschaltflächen, und Entwickler können sie entsprechend ihren eigenen Anforderungen anpassen und modifizieren.

Zusammenfassung

In diesem Artikel haben wir den grundlegenden Prozess der Erstellung einer rotierenden Navigationsschaltfläche vorgestellt und erklärt, wie man mit jQuery und CSS interaktive Effekte und Animationen erzielt. Ich glaube, dass Sie durch das Studium dieses Artikels die grundlegenden Fähigkeiten zum Erstellen einer rotierenden Navigationsschaltfläche beherrschen und diese Funktion auf Ihrer eigenen Website verwenden können, um die Benutzererfahrung und die Ästhetik der Website zu verbessern.

Das obige ist der detaillierte Inhalt vonJQuery-Navigationsschaltfläche drehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!