JavaScript zum Erzielen eines Akkordeoneffekts
|
In diesem Artikel wird der spezifische Code für JavaScript zum Erzielen des Akkordeoneffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt
Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
ul {
Breite: 100 %;
Textausrichtung: zentriert;
}
ul li {
Listenstil: keiner;
Überlauf: versteckt;
Anzeige: Inline-Block;
Übergang: alles 1en;
}
</Stil>
</Kopf>
<Text>
<ul>
</ul>
<Skript>
var ul = document.querySelector("ul");
var imgs = ["img/img4.jpg", "img/img5.jpg", "img/img6.jpg", "img/img7.jpg", "img/img8.jpg", "img/img9.jpg", ];
für (var i = 0; i < imgs.length; i++) {
var li = document.createElement("li");
var img = document.createElement("img");
img.src = Bilder[i];
li.appendChild(img);
ul.appendChild(li);
}
var lis = document.querySelectorAll("li");
Fenster.beimLaden = Fenster.beiGrößenänderung = Funktion() {
für (var i = 0; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
var imgM = document.querySelectorAll("img");
für (sei i = 0; i < imgM.length; i++) {
imgM[i].onmouseenter = Funktion() {
für (var j = 0; j < imgM.length; j++) {
lis[j].style.width = ((ul.offsetWidth - imgM[i].offsetWidth) / (imgs.length - 1)) - 10 + "px";
}
lis[i].style.width = imgM[i].offsetWidth + "px";
}
imgM[i].onmouseleave = Funktion() {
für (var i = 0; i < lis.length; i++) {
lis[i].style.width = (ul.offsetWidth / imgs.length) - 10 + "px";
}
}
}
</Skript>
</body>
</html>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:
|
<<: Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server
>>: So installieren Sie MySQL 5.7.17 und stellen die Kodierung in Windows auf UTF-8 ein
Artikel empfehlen
So implementieren Sie eine Array-Lazy-Evaluation-Bibliothek in JavaScript
Inhaltsverzeichnis Überblick So erreichen Sie es ...
Lösung für das Problem, dass der MySQL-Dienst unter Windows nicht gestoppt oder gelöscht werden kann
Ich habe MySQL unter Windows installiert, indem i...
Das neueste, äußerst detaillierte grafische Tutorial zum Herunterladen und Installieren virtueller VMware-Maschinen
Inhaltsverzeichnis 1. Laden Sie die virtuelle Mas...
Detaillierte Erläuterung der Fallstricke von add_header im Nginx-Konfigurationstutorial
Vorwort add_header ist eine Direktive, die im Hea...
So stellen Sie einzelne Tabellendaten mithilfe der vollständigen MySQL-Datenbanksicherungsdaten wieder her
Vorwort Beim Sichern der Datenbank wird eine voll...
Das neueste Installations-Tutorial für virtuelle Maschinen VMware 14
Zuerst gebe ich Ihnen den Aktivierungscode für VM...
Verwenden Sie VSCodes Remote-SSH, um eine Verbindung zu Linux für die Remote-Entwicklung herzustellen
Remote-SSH installieren und konfigurieren Öffnen ...
Ein kurzer Vortrag über die halbsynchrone MySQL-Replikation
Einführung MySQL erreicht eine hohe Verfügbarkeit...
Installations-Tutorial für die Zip-Version von MySQL 5.7.18
Die MySQL 5.7.18 Zip-Version von MySQL ist nicht ...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.
Code kopieren Der Code lautet wie folgt: <!DOC...
So verwenden Sie Makros in JavaScript
In Sprachen werden häufig Makros zur Implementier...
Schritte und Fallstricke beim Upgrade von Linux MySQL 5.5 auf MySQL 5.7
Inhaltsverzeichnis Linux MySQL 5.5 auf MySQL 5.7 ...
Detaillierte Erläuterung der SEO-Optimierungsmethode für Vue-Entwicklungswebsites
Da der Datenbindungsmechanismus von Vue und ander...
Linux verwendet Shell-Skripte, um historische Protokolldateien regelmäßig zu löschen
1. Dateistruktur des Tools-Verzeichnisses [root@w...