Natives JavaScript zum Erreichen von Skinning
|
Der spezifische Code zur Implementierung von Skinning mit nativem JavaScript dient Ihnen als Referenz. Der spezifische Inhalt ist wie folgt Prinzip Über das Klickereignis erhalten Sie die Informationen zum angeklickten Bild und ändern den Pfad des HTML-Hintergrundbilds CSS-Stile
<Stil>
Körper{
Rand: 0;
Polsterung: 0;
Hintergrund: URL (Bild/1.jpg) keine Wiederholung;
Hintergrundgröße: 100 % 100 %;
}
#Kasten{
Breite: 100 %;
Höhe: 130px;
Hintergrund: #999999;
}
#box ul{
Rand: 0;
Polsterung: 0;
Listenstil: keiner;
}
#box ul li li,#box ul li img{
Breite: 180px;
Höhe: 120px;
schweben: links;
Rand: 5px 60px;
}
</Stil>HTML-Quellcode <body id="Text"> <div id="box"> <ul> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> </div> </body> JavaScript-Quellcode
<Skript>
var oBody = document.getElementById('Body');
var oImg = document.getElementsByTagName('img');
für (var i=0;i<oImg.length;i++)
{
var oImgA=oImg[i];
oImgA.index=i+1;
oImgA.onclick=function(){
//konsole.log(dies);
oBody.style.background='url(img/'+this.index+'.jpg) keine Wiederholung';
oBody.style.backgroundSize = "100 % 100 %";
};
}
</Skript>Rendern
Klicken zum Wechseln
Quellcode
<!DOCTYPE>
<html lang="de">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Hautveränderung</title>
<Stil>
Körper{
Rand: 0;
Polsterung: 0;
Hintergrund: URL (Bild/1.jpg) keine Wiederholung;
Hintergrundgröße: 100 % 100 %;
}
#Kasten{
Breite: 100 %;
Höhe: 130px;
Hintergrund: #999999;
}
#box ul{
Rand: 0;
Polsterung: 0;
Listenstil: keiner;
}
#box ul li li,#box ul li img{
Breite: 180px;
Höhe: 120px;
schweben: links;
Rand: 5px 60px;
}
</Stil>
</Kopf>
<body id="Text">
<div id="box">
<ul>
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
</div>
</body>
</html>
<Skript>
var oBody = document.getElementById('Body');
var oImg = document.getElementsByTagName('img');
für (var i=0;i<oImg.length;i++)
{
var oImgA=oImg[i];
oImgA.index=i+1;
oImgA.onclick=function(){
//konsole.log(dies);
oBody.style.background='url(img/'+this.index+'.jpg) keine Wiederholung';
oBody.style.backgroundSize = "100 % 100 %";
};
}
</Skript>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:
|
<<: Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel
>>: Perfekte Lösung für das Problem des Verbindungsfehlers nach der MySQL-Client-Autorisierung
Artikel empfehlen
Detaillierte Erläuterung des Installationsprozesses der Standard-MySQL-Version (x64) für Windows
MySQL x64 stellt kein Installationsprogramm berei...
Erstellen Sie eine virtuelle Servermaschine in VMware Workstation Pro (grafisches Tutorial)
Die von mir verwendete VMware Workstation Pro-Ver...
Detailliertes Tutorial zur Installation der komprimierten Version von MySQL 8.0.11 unter Win10
Nachdem ich meinen Computer kürzlich neu installi...
Beispiel für das Abhören des Vue-Routings zum dynamischen Laden derselben Seite
Inhaltsverzeichnis Szenarioanalyse Entwicklung Zu...
Best Practices-Handbuch zum Speichern von Daten in MySQL
Inhaltsverzeichnis Vorwort Verwenden Sie keine Ze...
CSS-Menüschaltflächenanimation
Um ein Dropdown-Menü zu schreiben, klicken Sie au...
Bereitstellungsdokument für die Sicherheitseinstellungen des Win2008-Servers (empfohlen)
Ich hatte schon vor Neujahr an dem Projekt gearbe...
Detaillierte Schritte zum Erstellen der TypeScript-Umgebung und Bereitstellen in VSCode
Inhaltsverzeichnis TypeScript-Umgebungskonstrukti...
Einführung in die Verwendung von Requisiten in Vue
Vorwort: In Vue können Props verwendet werden, um...
So verwenden Sie das Vue-Router-Routing
Inhaltsverzeichnis 1. Beschreibung 2. Installatio...
Installationsprozess des 64-Bit-Quellcodes von CentOs7 MySQL 5.6.40
1. Installieren Sie zuerst die Abhängigkeitspaket...
Detaillierte Erklärung zur Verwendung von Element-Plus in Vue3
Inhaltsverzeichnis 1. Installation 2. Importieren...
MySQL-Grundlagen - Kurzanleitung - Wissenszusammenfassung (mit Mindmap)
Inhaltsverzeichnis Vorwort 1. Grundkenntnisse der...
Detaillierte Erklärung, wie zwei Node.js-Prozesse kommunizieren
Inhaltsverzeichnis Vorwort Kommunikation zwischen...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17
Der Blogger sagte : Ich habe eine Reihe von Blogb...