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
Über die MariaDB-Datenbank unter Linux
Inhaltsverzeichnis Über die MariaDB-Datenbank unt...
So konfigurieren Sie die Neuschreibung von Nginx-Domänennamen und die Auflösung von Platzhalterdomänennamen
In diesem Artikel erfahren Sie, wie Sie Nginx so ...
Benutzerdefinierte Docker-Netzwerkimplementierung
Inhaltsverzeichnis 1. Passen Sie das Netzwerk an,...
So verwenden Sie Docker zum Erstellen eines privaten pypi-Repositorys
1. Konstruktion 1. Bereiten Sie die Datei htpassw...
So implementieren Sie eine automatische Remote-Sicherung von MongoDB unter Linux
Vorwort Nachdem ich den vorherigen Artikel über d...
CSS-Implementierungscode für horizontale und vertikale Fortschrittsbalken
Manchmal ist es schön, ein paar nette Scrollbar-E...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.18 (Linux)
Dieser Artikel zeichnet das grafische Tutorial zu...
JavaScript imitiert den Jingdong-Lupeneffekt
In diesem Artikel wird der spezifische Code für J...
Methode zur Realisierung der Internetverbindung durch VMware Virtual Machine Bridging
Nachdem Sie VMware installiert und eine neue virt...
Informationen zu WSL-Konfigurations- und Änderungsproblemen in Docker
https://docs.microsoft.com/en-us/windows/wsl/wsl-...
Lösen Sie das Problem, dass das Element DateTimePicker+vue Popup-Box nur Stunden anzeigt
Drei Wissenspunkte: 1. CSS-Nachkommenselektor htt...
Häufig verwendete HTML-Format-Tags_Powernode Java Academy
1. Titel HTML definiert sechs <h>-Tags: <...
Detaillierte Erläuterung der Verwendung von HTML-Canvas und Seitenspeichertechnologie in JavaScript
Inhaltsverzeichnis 1. JavaScript verwendet Canvas...
Implementierung des MySQL Shell import_table-Datenimports
Inhaltsverzeichnis 1. Einführung in import_table ...
So fügen Sie einem Hintergrundbild in CSS3 eine Farbmaske hinzu
Vor einiger Zeit stieß ich während der Entwicklun...