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
Fallanalyse mehrerer MySQL-Aktualisierungsvorgänge
Inhaltsverzeichnis Fallstudie Kontostand aktualis...
Einführung in grundlegende HTML-Steuerelemente_PowerNode Java Academy
Das <input>-Tag Das <input>-Tag wird ...
Detaillierte Konfiguration des mysql8.x-Docker-Remotezugriffs
Inhaltsverzeichnis Umweltbedingungen Aufgetretene...
Zusammenfassung der wichtigsten Wissenspunkte zur MySQL-Abfrageoptimierung
Vorwort Abfrageoptimierung ist nichts, was über N...
Beispielanalyse der Verwendung des neuen JSON-Feldtyps in MySQL 5.7
Dieser Artikel veranschaulicht anhand eines Beisp...
Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist
In diesem Artikelbeispiel wird der spezifische Co...
Bei der Verwendung von mybatis-generator mit mysql8.0.3 in IDEA sind Fehler aufgetreten
1. Fügen Sie das Plug-In hinzu und fügen Sie die ...
So verwenden Sie den Linux-Paste-Befehl
01. Befehlsübersicht Der Einfügebefehl fügt die e...
5 Möglichkeiten, Ihre JavaScript-Codebasis sauberer zu machen
Inhaltsverzeichnis 1. Verwenden Sie Standardparam...
Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)
Anaconda ist die beliebteste Python-Plattform für...
Vue realisiert Preiskalendereffekt
In diesem Artikelbeispiel wird der spezifische Co...
Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile
Die Layui-Tabelle enthält mehrere Datenzeilen. Üb...
So verwenden Sie die Positionierung, um Elemente zu zentrieren (Tipps zum Webseiten-Layout)
So zentrieren Sie ein Element im Browserfenster H...
Grafisches Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.16
Dieser Artikel beschreibt die Installations- und ...
Der Unterschied zwischen MySQL execute, executeUpdate und executeQuery
Die Unterschiede zwischen „execute“, „executeUpda...