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
MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)
my.cnf ist die Konfigurationsdatei, die beim Star...
Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags
Was ist ein Mata-Tag? Das <meta>-Element li...
Sequenzimplementierungsmethode basierend auf MySQL
Das Team ersetzte den neuen Rahmen. Alle neuen Un...
So schreiben Sie schönen HTML-Code
So sieht schöner HTML-Code aus. So schreiben Sie ...
Analyse der prinzipiellen Implementierung aus dem Quellcode des Mini-Programm-Entwicklertools
Inhaltsverzeichnis So zeigen Sie den Quellcode de...
Detaillierte Erklärung zur Migration einer MySQL-Datenbank auf einen anderen Computer
1. Suchen Sie zunächst die Datendatei auf dem Mig...
Docker-Volumes-Dateizuordnungsmethode
Hintergrund Wenn Sie am Blockchain-Protokollmodul...
Klicken Sie auf die untere rechte Ecke der CSS-Pseudoklasse, um ein Häkchen anzuzeigen, das den ausgewählten Beispielcode anzeigt
Wirkung: CSS: .s_Typ { Rand: keiner; Rahmenradius...
Schritte zur Verwendung von ORM zum Hinzufügen von Daten in MySQL
【Vorwort】 Wenn Sie ORM zum Bedienen von Daten in ...
MySQL erklärt das Prinzip und Beispiel zum Abrufen von Abfrageanweisungen
„explain“ wird verwendet, um Informationen zum Ab...
Was ist Tabellenpartitionierung und -partitionierung?MySql-Datenbankpartitionierung und Tabellenpartitionierungsmethode
1. Warum müssen wir Tabellen und Partitionen auft...
Binäre Installation von MySQL 5.7.23 unter CentOS7
Die Installationsinformationen im Internet sind u...
Der Unterschied zwischen Schlüssel und Index in MySQL
Schauen wir uns zunächst den Code an: ALTER TABLE...
Die Methode zur Änderung vergessener MySql-Passwörter ist für Versionen ab 5.7 geeignet.
1. Stoppen Sie zuerst den mysqld.exe-Prozess 2. Ö...
Bereitstellung des Quellcodes des Docker-Containers. httpd verwendet Speichervolumen, um die Website bereitzustellen (empfohlen).
Inhaltsverzeichnis Stellen Sie httpd mit dem Quel...