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 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:
|
<<: MySQL-Gruppierungsabfragen und Aggregatfunktionen
>>: Analyse der allgemeinen Konfigurationsmethoden für virtuelle Hosts von Apache
Artikel empfehlen
Karusselleffekte mit JavaScript implementieren
In diesem Artikel wird der spezifische Code für J...
Detaillierte Einführung in Protokolle im Linux-System
Inhaltsverzeichnis 1. Logbezogene Dienste 2. Geme...
Win10 MySQL 5.6.35 Winx64 kostenlose Installationsversion Konfigurations-Tutorial
Tutorial zur kostenlosen Konfiguration der mysql ...
Linux: Kein Speicherplatz mehr auf Gerät 500 – Fehler aufgrund voller Inodes
Was ist ein Inode? Um Inode zu verstehen, müssen ...
Wie kompliziert ist die Priorität von CSS-Stilen?
Gestern Abend habe ich mir eine Interviewfrage ang...
Der Excel-Export schlägt in der Docker-Umgebung immer fehl
Der Excel-Export schlägt in der Docker-Umgebung i...
Verstehen Sie die Prinzipien und Anwendungen von JSONP in einem Artikel
Inhaltsverzeichnis Was ist JSONP JSONP-Prinzip JS...
Einrichten freigegebener Ordner in der virtuellen Ubuntu-Maschine von VMWare14.0.0
Dies ist mein erster Blogbeitrag. Aus Zeitgründen...
Detaillierte Erläuterung der Installation von Anwendungen in Linux Centos7 ohne Internetverbindung
1. Im vorherigen Kapitel haben wir gelernt, dass ...
Python3.6-MySql Dateipfad einfügen, die Lösung zum Entfernen des Backslashs
Wie unten dargestellt: Ersetzen Sie es einfach, w...
MySQL-Startfehler beheben: FEHLER 2003 (HY000): Keine Verbindung zum MySQL-Server auf „localhost“ möglich (10061)
Dieser Fehler tritt häufig bei Anfängern auf. Die...
Eine kurze Diskussion über HTML-Dokumenttypen und -Kodierung
DOKTYP Doctype wird verwendet, um dem Browser mit...
So fragen Sie die neueste Transaktions-ID in MySQL ab
Vorne geschrieben: Manchmal müssen Sie möglicherw...
Detaillierte Erläuterung des Prozesses zum Bereitstellen von MySql auf dem Centos-Server und zum Herstellen einer Verbindung mit Navicat
(1) Serverkonfiguration: [root@localhost ~]# cd /...
Vue implementiert das Hoch- und Herunterladen von Dateien
In diesem Artikelbeispiel wird der spezifische Co...