jQuery implementiert die Anzeige und Ausblendung von Anzeigenanimationen

Wir sehen oft, dass Anzeigen nach ein paar Sekunden erscheinen und dann verschwinden. Lassen Sie uns das JQuery-Framework verwenden, um diese Funktion zu implementieren.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="UTF-8">
    <title>Automatisches Ein- und Ausblenden von Werbung</title>
    <Stil>
        #Inhalt{Breite:100%;Höhe:500px;Hintergrund:#999}
    </Stil>

    <!--jQuery einführen-->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <Skript>
        /*
            brauchen:
                1. Wenn die Seite geladen ist, 3 Sekunden später. Anzeigen automatisch anzeigen 2. Die Anzeigen verschwinden automatisch, nachdem sie 5 Sekunden lang angezeigt wurden.

            analysieren:
                1. Verwenden Sie zum Abschließen einen Timer. setTimeout (einen Timer ausführen)
                2. Die Analyse ergab, dass die Anzeige- und Ausblendanimationseffekte von JQuery tatsächlich die Anzeige steuern
                3. Verwenden Sie die Show/Hide-Methode, um die Anzeige anzuzeigen*/
        //Eingabefunktion, nachdem die Seite geladen wurde, definieren Sie den Timer und rufen Sie diese beiden Methoden auf$(function () {
            //Definieren Sie einen Timer, rufen Sie die Methode adShow auf und führen Sie setTimeout(adShow,3000) einmal 3 Sekunden später aus;
            //Definieren Sie einen Timer, rufen Sie die Methode adHide auf und führen Sie nach 8 Sekunden „setTimeout(adHide,8000)“ aus.
        });
        //Display-Anzeigen Funktion adShow() {
            //Holen Sie sich das Anzeigen-Div und rufen Sie die Anzeigemethode $("#ad").show("slow"); auf.
        }
        //Werbung ausblenden function adHide() {
            //Holen Sie sich das Ad-Div und rufen Sie die Hide-Methode auf $("#ad").hide("slow");
        }
    </Skript>
</Kopf>
<Text>
<!-- Gesamt-DIV -->
<div>
    <!-- Anzeige DIV -->
    <div id="Anzeige" style="Anzeige: keine;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- Haupttext unten -->
    <div id="Inhalt">
        Körperteil</div>
</div>
</body>
</html>

Verzeichnisstruktur:

Laufergebnisse:

Als ich das erste Mal hineinging, erschien die Anzeige nicht.

Drei Sekunden später erscheint die Anzeige

Die Anzeige verschwindet nach fünf Sekunden.

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: