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:

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
JavaScript zum Erzielen eines Skin-Effekts (Ändern des Hintergrunds)

<<: 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