JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)

In diesem Artikel wird der spezifische JavaScript-Code zur Erzielung eines Skin-Änderungseffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Skin-Change-Effekt: Klicken Sie auf verschiedene Bilder, um den Hintergrund der entsprechenden Seite zu ändern

Umsetzungsideen

1. Definieren Sie einen Satz von Bildern und weisen Sie jedem src-Attribut den Pfad des Hintergrundbilds zu
2. Holen Sie sich einen Satz von Bildelementobjekten (holen Sie sich ein Pseudo-Array)
3. Die for-Schleife bindet das Klickereignis - - -onclick an das Bild. Im Eventhandler wird das Hintergrundbild des Body-Elementobjekts auf - - -den Pfad des aktuell angeklickten Bildes gesetzt.
4. Hinweis: Das Objekt des Body-Elements wird als - - -document.body abgerufen, js wird der Pfad des Hintergrundbilds zugewiesen. Beachten Sie die Verkettung des Pfads - - -document.body.style.backgroundImage = 'url(' + this.src + ')';

Codebeispiel

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Skin-Effekt</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
            Box-Größe: Rahmenbox;
        }
        
        Körper {
            Hintergrund: URL (Bilder/壁纸1.jpg) keine Wiederholung oben in der Mitte;
            Hintergrundgröße: Abdeckung;
        }
        
        .Kasten {
            Überlauf: versteckt;
            Breite: 610px;
            Rand: 100px automatisch;
            Hintergrundfarbe: #fff;
        }
        
        .box li {
            Breite: 25 %;
            Höhe: 100px;
            Listenstil: keiner;
            schweben: links;
            Cursor: Zeiger;
            Rand: 1px durchgezogen #fff;
        }
        
        img {
            Breite: 100 %;
            Höhe: 100%;
        }
    </Stil>
</Kopf>

<Text>
    <ul Klasse="Box">
        <li><img src="images/Bild1.jpg" alt=""></li>
        <li><img src="images/Bild 2.jpg" alt=""></li>
        <li><img src="images/Bild 3.jpg" alt=""></li>
        <li><img src="images/Bild 4.jpg" alt=""></li>
    </ul>
    <Skript>
        var Bilder = document.querySelector('.box').querySelectorAll('img');
        konsole.log(Bilder);
        für (var i = 0; i < Bilder.Länge; i++) {
            Bilder[i].onclick = Funktion() {
                konsole.log(diese.src);
                Dokument.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </Skript>
</body>

</html>

Seiteneffekte

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:

Natives JavaScript zum Erreichen von Skinning
Detaillierte Erläuterung der Methode zur Implementierung der Skin-Änderungsfunktion in JS
js Dom realisiert Hautveränderungseffekt
Beispiel für die Verwendung von jQuery in Kombination mit dem Plug-In jQuery.cookie.js zur Implementierung der Skinning-Funktion
JavaScript zum Implementieren der Skin-Änderungsfunktion
js, um einfach die Skinning-Funktion für Webseiten zu implementieren
js, um einen einfachen Webseiten-Skins-Effekt zu erzielen
AngularJS-Website-Skins-Beispiel
js+css, um einfach einen Webseiten-Skins-Effekt zu erzielen
js ändert dynamisch den gesamten Seitenstil, um einen Skin-Änderungseffekt zu erzielen

<<: MySQL-Gruppierungsabfragen und Aggregatfunktionen

>>: Analyse der allgemeinen Konfigurationsmethoden für virtuelle Hosts von Apache

Detaillierte Erläuterung der MySQL-Hochverfügbarkeitsarchitektur

JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)

Umsetzungsideen

Codebeispiel

Seiteneffekte

Detaillierte Erläuterung der MySQL-Hochverfügbarkeitsarchitektur

CSS-Implementierungscode für die Textausrichtung

CSS erstellt Tippboxen, Bubble-Boxen und Dreiecke

So lernen Sie algorithmische Komplexität mit JavaScript

Notieren Sie eine Falle bei der Aktualisierung der MySQL-Update-Anweisung

Detaillierte Erklärung der reinen SQL-Anweisungsmethode basierend auf JPQL

Analyse der Methoden zur visuellen Strukturierung und Gestaltung von Kinder-Websites

Detaillierte Erklärung des Unterschieds zwischen CSS-Link und @import

Verwenden Sie jQuery, um das Problem mit ungültigen Seitenankerpunkten unter Iframe zu beheben

Lösen Sie das Problem, dass Zeilenhöhe = Elementhöhe, der Text aber nicht vertikal zentriert ist

Artikel empfehlen

Installation der virtuellen Maschine Kali Linux Vmware (Abbildung und Text)

Detaillierte Erklärung der Vue-Komponenten

100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)

Beheben Sie das Problem, dass der benutzerdefinierte CSS-Stil von ElementUI nicht wirksam wird

So ändern Sie das Root-Passwort von MySQL in Docker

Vor- und Nachteile von MySQL-Indizes und Richtlinien zum Erstellen von Indizes

Ausführliche Erläuterung der InnoDB-Sperren in der MySQL-Technologie

Implementierung der Docker-Batch-Container-Orchestrierung

Beispielanalyse der Verwendung von GROUP_CONCAT in MySQL

Detaillierte Erläuterung der Nginx-Standortkonfiguration (Standortübereinstimmungsreihenfolge)

CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft

Windows Server 2019 installieren (grafisches Tutorial)

So ändern Sie den MySQL-Zeichensatz

JS-Implementierung des Apple-Rechners

So ändern Sie die Gruppe, zu der ein Benutzer in Linux gehört