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
mysql implementiert den Import nur einer angegebenen Tabelle aus der SQL-Datei der exportierten Daten
Szenario Gestern hat das System automatisch alle ...
Sie müssen wahrscheinlich keine Switch-Anweisungen in JavaScript verwenden
Inhaltsverzeichnis Kein Schalter, keine komplexen...
Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu
Vorwort Verschiedene Methoden zur Skriptausführun...
Detaillierte Erläuterung des Prozesses der Zabbix-Überwachung von SQLServer
Werfen wir einen Blick auf die Zabbix-Überwachung...
Erste Schritte beim Erstellen einer Website für Anfänger - Die Voraussetzungen und Tools, die zum Erstellen einer Website erforderlich sind
Heute werde ich diese Anfängerfragen beantworten: ...
So erkennen Sie die Ubuntu-Version mithilfe der Befehlszeile
Methode 1: Verwenden Sie das Dienstprogramm lsb_r...
Detaillierte Erklärung der grundlegenden Interaktion von Javascript
Inhaltsverzeichnis 1. So erhalten Sie Elemente Ho...
So aktivieren Sie TLS- und CA-Authentifizierung in Docker
Inhaltsverzeichnis 1. Zertifikat generieren 2. Ak...
CentOS 7 - Lösungsprozessdiagramm für vergessene Passwörter
brauchen Unabhängig davon, ob es sich um ein Wind...
Das Linux-System verbietet den Remote-Login-Befehl des Root-Kontos
PS: So deaktivieren Sie die Remote-Anmeldung des ...
Teilen Sie 10 der neuesten Web-Frontend-Frameworks (Übersetzung)
In der Welt der Webentwicklung sind Frameworks wei...
JavaScript implementiert Farberkennung beim Überfahren der Tabellenzeile mit der Maus
In diesem Artikel erfahren Sie, wie Sie mit JavaS...
Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)
In diesem Artikel werden hauptsächlich kreisförmi...
So benennen Sie die Tabelle in MySQL um und worauf Sie achten müssen
Inhaltsverzeichnis 1. Tabellenmethode umbenennen ...
MySQL-Trigger-Verwendungsszenarien und Methodenbeispiele
auslösen: Trigger-Verwendungsszenarien und entspr...