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 steigern Sie Ihre Web-Performance um das Dreifache, indem Sie einen Parameter in Nginx aktivieren
1. Einige aufgetretene Probleme Ich erinnere mich...
Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs
Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...
Welche Vorteile bietet die Verwendung von B+Tree als Index in MySQL?
Inhaltsverzeichnis Warum benötigen Datenbanken In...
NestJs verwendet Mongoose zum Betrieb von MongoDB
Ich habe vor Kurzem angefangen, das NestJs-Framew...
JavaScript implementiert die Maussteuerung eines frei beweglichen Fensters
In diesem Artikel wird der spezifische JavaScript...
Der Unterschied und die Verwendung des Kommunikationsbusses der Bruderkomponenten von Vue2 und Vue3
Inhaltsverzeichnis vue2.x vue3.x Verwendung des T...
Eine kurze Analyse von MySQL - MVCC
Versionskette In den Tabellen der InnoDB-Engine g...
Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht
In der Vergangenheit wurde Float häufig für das L...
Detaillierte Erläuterung der erzwungenen Freigabe belegter Ports unter Linux und der Methode zum Öffnen von Ports in der Linux-Firewall
Bei der Installation von Nginx, MySQL, Tomcat und...
Erweitert und Zusammenfassung häufig verwendeter SQL-Anweisungen in MySQL-Datenbanken
Dieser Artikel beschreibt anhand von Beispielen d...
innerHTML-Anwendung
Blanks Blog: http://www.planabc.net/ Die Verwendu...
Vue Virtual DOM – Schnellstart
Inhaltsverzeichnis Virtueller DOM Was ist virtuel...
Detaillierte Erläuterung der primitiven Werte und Referenzwerte in ECMAScript
Inhaltsverzeichnis Vorwort Was sind dynamische Ei...
Lösung für das Problem, dass der Rahmenstil des Tags <td></td> im Browser nicht angezeigt werden kann
Frage: In einigen Browsern, wie zum Beispiel im K...
Three.js-Beispielcode zur Implementierung des Tautropfen-Animationseffekts
Vorwort Hallo zusammen, hier ist der CSS-Assisten...