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:
|
>>: Detaillierte Erklärung der Verwendung des Linux-Befehls nslookup
Artikel empfehlen
Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms
Inhaltsverzeichnis Prototypenkette Wir können ein...
CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung
Der standardmäßige Bildlaufleistenstil in Windows...
So konfigurieren Sie ein Jupyter-Notebook im Docker-Container
Das Jupyter-Notebook wird unter dem Docker-Contai...
MySql 8.0.11-Winxp64 (kostenlose Installationsversion) Konfigurations-Tutorial
1. Entpacken Sie das Zip-Paket in das Installatio...
Analyse des Prinzips und der Verwendung der kontinuierlichen MySQL-Aggregation
Dieser Artikel veranschaulicht anhand von Beispie...
Erstellen Sie eine virtuelle Umgebung mit venv in Python3 in Ubuntu
1. Virtuelle Umgebung folgt dem Projekt, erstelle...
So implementieren Sie die Vue-Bindungsklasse und den Inline-Bindungsstil
Inhaltsverzeichnis Bindungsklasse Inline-Stile bi...
Praktischer grundlegender Beispielcode für den Linux-Befehl sed
Der Linux-Stream-Editor ist eine nützliche Möglic...
Einführung in 10 Online-Entwicklungstools für Webdesign
1. Online-Textgenerator BlindTextGenerator: Für D...
Wird der Index in der MySQL-Abfragebedingung verwendet?
Wenn Sie ein Arbeitgeber fragt, ob in einer MySQL...
9 Tipps für das Webseiten-Layout
<br />Verwandte Artikel: 9 praktische Vorsch...
Fehlerbehebung bei der Ursache des 502 Bad Gateway-Fehlers auf dem Nginx-Server
Der Server meldet einen Fehler 502 beim Synchroni...
Verschiedene Implementierungsmethoden von Vue zum Ändern von übergeordneten Komponenteneigenschaften durch untergeordnete Komponenten
Inhaltsverzeichnis Vorwort Gängige Methoden 1. Än...
W3C Tutorial (5): W3C XML Aktivitäten
XML dient der Beschreibung, Speicherung, Übertrag...
Vue importiert Excel-Tabellen und lädt automatisch die Daten herunter, die nicht importiert werden konnten
Es gibt eine solche Anforderung: eine Importschal...