jQuery implementiert Akkordeoneffekte
|
Dieser Artikel gibt Ihnen den spezifischen Code von jQuery zur Implementierung von Akkordeon als Referenz. Der spezifische Inhalt ist wie folgt Verwenden Sie jQuery-Effekte (Funktionen wie folgt):
Code (Kettenprogrammierung):
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<script src="../jquery-3.4.1.min.js"></script>
<style type="text/css">
* {
Rand: 0;
Polsterung: 0;
}
img {
Anzeige: Block;
}
ul {
Listenstil: keiner;
}
.König {
Breite: 852px;
Rand: 100px automatisch;
Hintergrund: URL (../images/bg.png) keine Wiederholung;
Überlauf: versteckt;
Polsterung: 10px;
}
.könig ul {
Überlauf: versteckt;
}
.König li {
Position: relativ;
schweben: links;
Breite: 69px;
Höhe: 69px;
Rand rechts: 10px;
}
.könig li.aktuell {
Breite: 224px;
}
.König li.aktuell .groß {
Anzeige: Block;
}
.könig li.aktuell .klein {
Anzeige: keine;
}
.groß {
Breite: 224px;
Anzeige: keine;
}
.klein {
Position: absolut;
oben: 0;
links: 0;
Breite: 69px;
Höhe: 69px;
Rahmenradius: 5px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="König">
<ul>
<li Klasse="aktuell">
<a href="">
<img src="../images/m1.jpg" alt="" class="small">
<img src="../images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="">
<img src="../images/l1.jpg" alt="" class="small">
<img src="../images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="">
<img src="../images/c1.jpg" alt="" class="small">
<img src="../images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="">
<img src="../images/w1.jpg" alt="" class="small">
<img src="../images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="">
<img src="../images/z1.jpg" alt="" class="small">
<img src="../images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="">
<img src="../images/h1.jpg" alt="" class="small">
<img src="../images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="">
<img src="../images/t1.jpg" alt="" class="small">
<img src="../images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
<Skript>
$(Funktion() {
//1. Wenn die Maus über das kleine li fährt, gibt es zwei Schritte: Die Breite des aktuellen kleinen li wird 225px, das kleine Bild darin wird ausgeblendet und das große Bild wird eingeblendet. //2. Die Breite des verbleibenden kleinen li-Bruderelements wird 69px, das kleine Bild wird eingeblendet und das große Bild wird ausgeblendet. $(".king li").mouseenter(function() {
$(diese).stop().animate({
Breite: 224
}).find(".small").stop().fadeOut().geschwister(".big").stop().fadeIn();
$(diese).geschwister("li").stop().animate({
Breite: 69
}).find(".small").stop().fadeIn().geschwister(".big").stop().fadeOut();
})
})
</Skript>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
>>: jQuery realisiert die volle Funktion des Einkaufswagens
Artikel empfehlen
Mehrere Situationen, die dazu führen, dass MySQL einen vollständigen Tabellenscan durchführt
Inhaltsverzeichnis Fall 1: Fall 2: Fall 3: Um es ...
Führen Sie die Schritte zur Installation von MySQL 8.0.x unter Linux aus.
MySQL Einführung in MySQL MySQL war ursprünglich ...
Steuern Sie die vertikale Mitte des Textes im HTML-Textfeld über CSS
Wenn das Höhenattribut von Text definiert ist, wir...
Zusammenfassung von 28 gängigen JavaScript-String-Methoden und Verwendungstipps
Inhaltsverzeichnis Vorwort 1. Ermitteln Sie die L...
Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios
Inhaltsverzeichnis Vorwort Kern - CancelToken Pra...
Wann sollte eine Website Anzeigen schalten?
Als ich vor kurzem mit einem Internet-Veteranen ü...
Der Unterschied zwischen Name und Wert im Eingabe-Tag
Typ ist das Steuerelement, das für die Eingabe und...
MySQL-Methode zur Sperrensteuerung für Parallelität
Inhaltsverzeichnis Vorwort 1. Optimistisches Sper...
Warum wird IE6 von den meisten Leuten verwendet?
In erster Linie bin ich Webdesigner. Genauer gesag...
Zwei Möglichkeiten zur Lösung des Problems, dass die MySQL-Master-Slave-Datenbank nicht synchronisiert wird
Inhaltsverzeichnis Zwei Möglichkeiten zur Lösung ...
Installieren Sie CentOS7 in VMware (legen Sie eine statische IP-Adresse fest) und installieren Sie die MySQL-Datenbank über den Docker-Container (sehr ausführliches Tutorial).
Ein Student im zweiten Studienjahr fragte mich, w...
JS removeAttribute()-Methode zum Löschen eines Attributs eines Elements
Verwenden Sie in JavaScript die Methode removeAtt...
Leitfaden zum Schreiben von HTML-Code
Gängige Konventions-Tags Selbstschließende Tags, ...
Detaillierte Erläuterung der Verwendung von Befehlen in MySQL zum Erreichen einer hierarchischen Suchhilfe
Vorwort Dieser Artikel stellt hauptsächlich den r...
Lösen Sie das Problem, dass Navicat für MySQL beim Herstellen einer Verbindung zu MySQL einen 2005-Fehler meldet
Im vorherigen Artikel habe ich beschrieben, wie s...