Javascript, um den Effekt des Schließens von Anzeigen zu erzielen
|
Hier ist eine Fallstudie zu Ihrer Information, wie Sie Anzeigen mit Javascript schließen können. Die Einzelheiten sind wie folgt: Ich lerne immer noch das große Frontend. Bitte verzeihen Sie mir, wenn es unregelmäßige oder falsche Codes und Ideen gibt. Vielen Dank für Ihren Rat. Auf Webseiten werden uns häufig störende kleine Werbeanzeigen angezeigt. Normalerweise gibt es neben der Anzeige eine bestimmte Stelle und ein Symbol zum Schließen dieser Anzeige. Der folgende JS-Code dient zur einfachen Implementierung
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Stil>
*{
Polsterung: 0;
Rand: 0;
Rand: 0;
}
.gg{
Breite: 100 %;
Höhe: 300px;
Hintergrundbild: url("../images/JD.png");
}
.img{
Breite: 20px;
Höhe: 20px;
schweben: rechts;
}
</Stil>
</Kopf>
<Text>
<div Klasse="gg">
<img class="img" src="../images/2.jpg" title="Schließen">
</div>
<Skript>
var gg = document.querySelector('.gg')
var mg = document.querySelector('img')
mg.onclick = Funktion () {
gg.style.display = "keine"
}
</Skript>
</body>
</html>Code Erklärung Das Prinzip hier ist sehr einfach. Ich platziere ein störendes Werbebild unten im Div, platziere dann ein kleines Symbol, das Schließen darstellt, darauf und platziere es in der oberen rechten Ecke der kleinen Anzeige. Dann erhalte ich das Ereignis, und wenn es auf „onclick“ klickt, wird die Funktion ausgelöst. Der Inhalt der Funktion besteht darin, dieses große Div-Feld direkt auszublenden und nicht anzuzeigen, wodurch der Zweck des Schließens der Anzeige erreicht wird. Demonstrationseffekt Beachten Sie die obere rechte Ecke
Nach dem Klicken auf den festgelegten Standort
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:
|
<<: So ändern Sie das MySQL-Passwort unter Centos
>>: Probleme und Lösungen für MYSQL5.7.17-Verbindungsfehler unter MAC
Artikel empfehlen
Führen Sie die Schritte zur Installation von FFmpeg auf dem CentOS-Server aus
Vorwort Die Serversystemumgebung ist: CentOS 6.5 ...
Linux/Mac MySQL-Befehlszeilenmethode zum Ändern des Passworts bei vergessenem Passwort
Alle Voraussetzungen erfordern Root-Berechtigunge...
Einfaches Beispiel für die Verwendung eines Docker-Containers
Inhaltsverzeichnis 1. Ziehen Sie das Bild 2. Ausf...
VMware virtuelle Maschine installieren CentOS 8 (1905) System-Tutorial-Diagramm
Die weltberühmte virtuelle Maschinensoftware VMwa...
Beheben Sie das Problem, dass beim Herunterfahren von Tomcat mit shutdown.bat auch andere Tomcats heruntergefahren werden.
Die Datei shutdown.bat enthält einen Satz wenn ni...
Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung
Vor Kurzem musste ich das Projekt für die Mitglie...
Unterschiede und Anwendungsbeispiele von for, for...in, for...of und forEach in JS
for-Schleife Grundlegendes Syntaxformat: für (Var...
Empfohlene 20 besten kostenlosen englischen Handschrift-Schriftarten
Jellyka BeesAntike Handschrift [Ank]* Jellyka Cutt...
Reagieren Sie auf die Verarbeitung von Fehlergrenzkomponenten
Dies ist der Inhalt von React 16. Es ist nicht di...
jQuery implementiert alle Auswahl- und umgekehrten Auswahloperationsfälle
In diesem Artikel wird der spezifische Code von j...
Kennen Sie den Unterschied zwischen leerem Wert und Nullwert in MySQL
Vorwort Kürzlich habe ich festgestellt, dass die ...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
Lösen Sie das Problem, dass Sie auf dem Linux-Server nicht auf die RabbitMQ-Verwaltungsseite zugreifen können
Da eine bestimmte Funktion meines Projekts erford...
Redo-Dateiwartungsmethode der InnoDB-Engine
Wenn Sie die Größe und Anzahl der InnoDB-Redo-Log...
Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive
Anpassen eines Demo-Befehls Die Syntax der benutz...