jQuery implementiert Akkordeon-Kleinbuchstaben

Dieser Artikel gibt Ihnen den spezifischen Code von jQuery zur Implementierung von Akkordeon als Referenz. Der spezifische Inhalt ist wie folgt

Code-Demonstrationseffekt:

1. Verwenden Sie jQuery und Animationsstile, um die Karussellbilder zu wechseln
2. Voraussetzung: Sie müssen animate.css importieren (Download von der offiziellen Website)

HTML Quelltext:

<Kopf>
    <meta charset="UTF-8">
    <title>Akkordeon</title>
    <link rel="stylesheet" href="../animate.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="../jquery-3.1.0.js"></script>
    <!-- <script src="js/accordionindex.js"></script>-->

</Kopf>
<Text>
    <div Klasse="bg"></div>
    <div Klasse="bg"></div>
    <div Klasse="bg"></div>
    <div Klasse="bg bg-active"></div>
    <div Klasse="Haupt">
        <ul>
            <li><div><p>Kreuzfeuer</p></div></li>
            <li><div><p>Ruhm des Königs</p></div></li>
            <li><div><p>Ruf der Pflicht</p></div></li>
            <li class="li-active"><div><p>Liga der Legenden</p></div></li>
        </ul>
    </div>
</body>

Skriptcode:

<Skript>
    $(Funktion () {
       $("li").mouseenter(Funktion () {
           //stop() stoppt den Animationseffekt$(this).stop().animate({width:"700px"},1000,"linear").fadeIn();
           $(this).siblings("li").stop().animate({width:"100px"},1000,"linear").fadeIn();
           $(".bg").eq($(this).index()).siblings(".bg").stop().fadeOut();
           $(".bg").eq($(this).index()).stop().animate({top:"700px"},400,"linear").fadeIn();

       }); 
    });
</Skript>

CSS Code:

*{
    Rand: 0;
    Polsterung: 0;
}
html, Text, .bg{
    Höhe: 700px;
    Breite: 1400px;
    Überlauf: versteckt;
}
Körper{
    Position: relativ;
}
.bg{
    Anzeige: keine;
}
.bg:n-tes-Kind(1){
    Hintergrund: URL("../images/1.jpg")keine Wiederholung Mitte/Cover;
}
.bg:n-tes-Kind(2){
    Hintergrund: URL("../images/2.jpg")keine Wiederholung Mitte/Cover;
}
.bg:n-tes-Kind(3){
    Hintergrund: URL("../images/3.jpg")keine Wiederholung Mitte/Cover;
}
.bg:n-tes-Kind(4){
    Hintergrund: URL("../images/4.jpg")keine Wiederholung Mitte/Cover;
}
/*Große Hintergrundanzeige*/
.bg-aktiv{
    Anzeige: Block;
}
.hauptsächlich{
    Position: absolut;
    Breite: 1000px;
    Höhe: 400px;
    /*Hintergrundfarbe: pink;*/
    links: 0;
    oben: 0;
    rechts: 0;
    unten: 0;
    Rand: automatisch;
}
.main ul{
    Listenstil: keiner;
}
.main ul li{
    schweben: links;
    Breite: 100px;
    Höhe: 400px;
    Übergang: rechts 1 s;
}
/*Kleine Hintergrundanzeige*/
.main ul li.li-aktiv{
    Breite: 700px;
    Höhe: 400px;

}
.main ul li:nth-child(1){
     Hintergrund: URL("../images/1.jpg")keine Wiederholung Mitte/Cover;
 }
.main ul li:nth-child(2){
    Hintergrund: URL("../images/2.jpg")keine Wiederholung Mitte/Cover;
}
.main ul li:nth-child(3){
    Hintergrund: URL("../images/3.jpg")keine Wiederholung Mitte/Cover;
}
.main ul li:nth-child(4){
    Hintergrund: URL("../images/4.jpg")keine Wiederholung Mitte/Cover;
}
.main ul li div{
    Höhe: 400px;
    Breite: 100px;
    Hintergrundfarbe: rgba(0,0,0,.5);
}
.main ul li div p{
    Farbe: #fff;
    Polsterung: 40px;
    Schriftgröße: 20px;
    Deckkraft: 0,5;
}

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: