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

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

Umsetzungsideen

Codebeispiel

Seiteneffekte

MySQL GROUP_CONCAT-Einschränkungslösung

Nginx-Konfiguration domänenübergreifende Anforderung Access-Control-Allow-Origin * detaillierte Erklärung

Beispielcode zur Implementierung eines Hintergrundunschärfeeffekts mit CSS

Implementierungsanweisungen zur Duplikatsprüfung und Deduplizierung von MySQL-Daten

Vue+Bootstrap realisiert ein einfaches Studentenverwaltungssystem

Eine kurze Diskussion über die Fallstricke und Lösungen der neuen Features von MySQL 8.0 (Zusammenfassung)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11

Detaillierte Erläuterung der Probleme und Lösungen beim flexiblen Mehrspaltenlayout

Implementierung von Platzhaltern und Escape-Zeichen in der Linux-Befehlszeile

So legen Sie die UTF-8-Kodierung in einer MySQL-Datenbank fest

Artikel empfehlen

Lernen Sie den Funktionsmechanismus von jsBridge in einem Artikel kennen

Eine kurze Diskussion über den virtuellen Speicher von Linux

mysql5.7.18 dekomprimierte Version zum Starten des MySQL-Dienstes

Analysieren Sie die Dauer von TIME_WAIT aus dem Linux-Quellcode

Detaillierte Erklärung des Responsive-Prinzips von Vue3

Einführung in die Verwendung von em im elastischen Layout in CSS3: Wie viele Pixel sind 1em?

Zusammenfassung der Verwendung von berechneten Vue-Eigenschaften und -Listenern

Anweisungen zur Verwendung von JSON-Operationsfunktionen in Mysql5.7

Ein Artikel zum schnellen Verständnis des Lebenszyklus und der Hook-Funktionen von Angular und Ionic

Beispielanalyse der Auswirkungen des MySQL-Index auf die Sortierung

Detaillierte Erklärung der Linux-RPM- und Yum-Befehle und -Verwendung

Detaillierte Anwendung des dynamischen Vue-Formulars

Führen Sie die Initialisierungs-SQL aus, wenn Docker MySQL startet

JavaScript-Entwurfsmuster – Muster der Verantwortungskette

VUE Erste Schritte Erlernen der Ereignisbehandlung