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
Beheben Sie den Fehler während der Verbindungsausnahme in Docker
Wenn Sie Docker zum ersten Mal verwenden, werden ...
Detaillierte Erläuterung der Verwendung und Vorsichtsmaßnahmen von Crontab unter Linux
Crontab ist ein Befehl zum Einrichten einer perio...
MySQL-Transaktionsanalyse
Transaktion Eine Transaktion ist eine grundlegend...
Installations- und Konfigurationsschritte für die grüne Dekomprimierungsversion von MySQL
Schritte: 1. MySQL-Datenbank installieren 1. Lade...
Grundlegende Anwendungsbeispiele für Listener in Vue
Inhaltsverzeichnis Vorwort 1. Grundlegende Verwen...
Detaillierte Erläuterung der Implementierung der Titelwiedergabe im WeChat-Applet und der aufgetretenen Fallstricke
Bei der Flugbahnwiedergabe des WeChat-Applets wer...
Analyse des Unterschieds zwischen Emits und Attrs in Vue3
Inhaltsverzeichnis abschließend Praxisanalyse Erw...
Schritte zur Installation von Pyenv unter Deepin
Vorwort In der Vergangenheit habe ich die Python-...
Einige Vorschläge zur Linux-Systemoptimierung (Kerneloptimierung)
Swap deaktivieren Wenn auf dem Server ein Datenba...
Ursachen und Lösungen für langsame MySQL-Abfragen
Es gibt viele Gründe für eine langsame Abfrageges...
So verwenden Sie Typescript zum Kapseln von lokalem Speicher
Inhaltsverzeichnis Vorwort Szenarien für die Verw...
MySQL-Datenaggregation und -gruppierung
Wir müssen Daten häufig zusammenfassen, ohne sie ...
HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen
Methode 1: <input id= "File1" type= &...
Detaillierte Erklärung basierend auf Event Bubbling, Event Capture und Event Delegation
Ereignis-Bubbling, Ereigniserfassung und Ereignis...
Analyse der Nutzung von Prozesssteuerungsfunktionen/Statistikfunktionen/Gruppierungsabfragen in MySql
Der Weg vor uns ist lang und beschwerlich, aber i...