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
So übermitteln Sie eine reine HTML-Seite, übergeben Parameter und überprüfen die Identität
Da das Projekt einen Fragebogen erfordert, der Kun...
Detailliertes Tutorial zur Installation von ffmpeg unter Linux
1. Installieren Sie ffmpeg unter Centos Linux 1. ...
18 Sets exquisiter kostenloser Symbolmaterialien im Apple-Stil zum Teilen
Apple-Becher-Symbole und Extras HD StorageBox – Z...
Zusammenfassung häufig verwendeter Toolfunktionen in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. Benutzerdefinierter...
Die Breite der Tabellenzelle td ist ungültig und der interne Inhalt dehnt sie immer aus
Beim Erstellen einer Tabellenseite ist die für td ...
Detaillierte Erläuterung der Architektur und Funktionen von InnoDB (Zusammenfassung der Lesehinweise zur InnoDB-Speicher-Engine)
Hintergrund-Threads •Hauptthread Der Kern-Hinterg...
MySQL 5.7.21 dekomprimierte Version des Tutorials zum Wiederherstellen von Daten über das historische Datenverzeichnis
Situationsbeschreibung: Die Datenbank wurde abnor...
MySQL verwendet Variablen, um verschiedene Sortierungen zu implementieren
Kerncode -- Im Folgenden werde ich die Implementi...
Schritte zum Konfigurieren von Nginx SSL zur Implementierung des HTTPS-Zugriffs (für Anfänger geeignet)
Vorwort Nach der Bereitstellung des Servers besuc...
Tutorial zur HTML-Tabellenauszeichnung (30): Farbattribut für dunkle Zellenränder BORDERCOLORDARK
Bei Zellen können dunkle Rahmenfarben individuell...
Detaillierte Erläuterung der gespeicherten Prozeduren, Cursor und Transaktionsbeispiele von MySQL
Detaillierte Erläuterung der gespeicherten Prozed...
Konvertieren Sie ausgeschnittene PSD-Bilder in das Div+CSS-Format
Beispiel für das Zuschneiden einer Webseite von P...
14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %
Vorwort Sass ist eine Erweiterung der CSS3-Sprach...
Grundlegendes Tutorial zum WeChat-Miniprogramm: Verwendung von Echart
Vorwort Schauen wir uns zunächst den Endeffekt an...
Detaillierte Erläuterung mehrerer API-Beispiele, die häufig in der fortgeschrittenen JavaScript-Frontend-Entwicklung verwendet werden
Inhaltsverzeichnis MutationObserver API Merkmale ...