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
Detaillierte Erklärung zur Verwendung von Vue+Element zum Implementieren des Tags oben auf der Seite
Inhaltsverzeichnis 1. Seiten-Rendering 2. Tags hi...
Tutorial zur MySQL-Datensicherungsmethode mit Multi-Master und One-Slave
Überblick Vorgänge, die auf einer Datenbank ausge...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...
JavaScript Canvas implementiert Tic-Tac-Toe-Spiel
In diesem Artikel wird der spezifische Code von J...
CSS3-Textanimationseffekte
Wirkung html <div Klasse="sp-container&qu...
Implementierung der VUE-Anzeige unendlicher Ebenenbaum-Datenstrukturen
Inhaltsverzeichnis Rekursiver Aufruf der Komponen...
Detaillierte Erklärung des Prinzips und Beispiel des new-Operators in JavaScript
Verwendung von neuen Die Funktion von new besteht...
Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10
Inhaltsverzeichnis 1 Konfiguration der Java-Umgeb...
Einige Fehler, die JavaScript-Anfänger häufig machen
Inhaltsverzeichnis Vorwort Verwechslung von „unde...
Erweiterte MySQL-Funktionen - detaillierte Erläuterung des Konzepts und des Mechanismus der Datentabellenpartitionierung
Inhaltsverzeichnis Partitionierungsmechanismus SE...
js implementiert eine einfache dreistufige Auswahlkaskade für Provinzen, Gemeinden und Bezirke
In diesem Artikel wird der spezifische Code von j...
Detailliertes Tutorial zur Installation und Konfiguration von MySql5.7 unter Ubuntu 20.04
Inhaltsverzeichnis 1. Änderung der Ubuntu-Quelle ...
Verwenden Sie html-webpack-plugin‘, um ein HTML-Seiten-Plugin im Speicher zu generieren
Wenn wir die webpackjs-Datei verpacken, führen wi...
Es ist ganz einfach zu verstehen, was Node.js ist
Inhaltsverzeichnis Offizielle Einführung in Node....
MySQL Flush-List und Flushing-Mechanismus für Dirty Pages
1. Überprüfung Der Pufferpool wird nach dem Start...