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
HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld
Ich habe vor Kurzem eine Website mit Anwaltsempfe...
VUE implementiert einen Beispielcode für das Spiel Flappy Bird
Flappy Bird ist ein sehr einfaches kleines Spiel,...
MySQL-Abfragemethode mit mehreren Bedingungen
MySQL-Abfrage mit mehreren Bedingungen Umgebung: ...
Detailliertes Tutorial zur Installation der MySQL-Datenbank auf Alibaba Cloud Server
Inhaltsverzeichnis Vorwort 1. Deinstallieren Sie ...
Das WeChat-Applet verwendet die Videoplayer-Videokomponente
In diesem Artikelbeispiel wird der spezifische Co...
Lernen Sie, wie Sie in 6 Sekunden 1 Million Datensätze in MySQL einfügen
1. Idee Es dauerte nur 6 Sekunden, um 1.000.000 D...
Zusammenfassung der Merkmale des SQL-Modus in MySQL
Vorwort Der SQL-Modus wirkt sich auf die von MySQ...
Detaillierte Erklärung der Methode getBoundingClientRect() in js
1. getBoundingClientRect() Analyse Die Methode ge...
XHTML-Einführungstutorial: Webseitenkopf und DTD
Obwohl Kopf und DTD nicht auf der Seite angezeigt...
Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten
Hintergrund Während des Projektentwicklungsprozes...
Lösung zum automatischen Auslösen von Klickereignissen beim Klicken auf ein Popup-Fenster in Vue (Simulationsszenario)
Geschäftsszenario: Verwenden Sie den EL-Dialog vo...
Vue-CLI3.x stellt Projekte automatisch auf dem Server bereit
Inhaltsverzeichnis Vorwort 1. Installieren Sie sc...
Erfahrungsaustausch zur Reparatur von MySQL InnoDB-Ausnahmen
Eine Reihe von MySQL-Bibliotheken zum Testen. Die...
Vue implementiert eine Countdown-Schaltfläche für den Bestätigungscode
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung mehrerer Nginx-Standorte, die alle Anfragen weiterleiten oder auf statische Ressourcendateien zugreifen
In diesem Artikel wird hauptsächlich die Implemen...