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
Zusammenfassung häufig verwendeter Zeit-, Datums- und Konvertierungsfunktionen in MySQL
Dieser Artikel fasst hauptsächlich einige häufig ...
So erkennen Sie die Dateisystemintegrität basierend auf AIDE in Linux
1. HILFE AIDE (Advanced Intrusion Detection Envir...
Lösen Sie das Problem, dass Docker Pull zurückgesetzt wird
In diesem Artikel wird beschrieben, wie Sie das P...
Detaillierte Erläuterung der sieben Wertübertragungsmethoden von Vue
1. Vom Vater zum Sohn Definieren Sie das props Fe...
Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0
Object.defineProperty verstehen Grammatik: Object...
So ändern Sie das ursprüngliche Passwort von MySQL auf dem MAC
Problembeschreibung: Ich habe einen Mac gekauft u...
Anweisungen zur Verwendung der MySQL-Isolations-Leseansicht
Welche historische Version kann die aktuelle Tran...
Docker verwendet Dockerfile, um die Node.js-Anwendung zu starten
Schreiben einer Docker-Datei Am Beispiel des von ...
Der Unterschied zwischen HTML, XHTML und XML
Entwicklungstrends: html (Hypertext-Markup-Sprache...
So implementieren Sie Property Hijacking mit JavaScript defineProperty
Inhaltsverzeichnis Vorwort Deskriptoren Detaillie...
Das Problem, dass Formularelemente und Eingabeaufforderungstext nicht ausgerichtet sind
In den letzten Projekten werden viele Formulare e...
Detaillierte Erläuterung des Funktionsprinzips und der Lösung der Js-Modularisierung
Inhaltsverzeichnis 1. Modulares Konzept 2. Modula...
In CSS häufig verwendete Schriftstile zum Festlegen verschiedener Schriftartänderungen (Beispiel mit ausführlicher Erläuterung)
CSS-Schrifteigenschaften definieren die Schriftfa...
Native JS realisiert den besonderen Effekt der Verbreitung von Liebe durch Mausbewegungen
In diesem Artikel wird ein JS-Spezialeffekt vorge...
So gehen Sie mit dem Fehler beim Einfügen seltener Zeichen in MySQL um (falscher Zeichenfolgenwert)
Kürzlich wurde auf Unternehmensseite gemeldet, da...