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: