Verwenden von js, um einen Wasserfalleffekt zu erzielen
|
In diesem Artikelbeispiel wird der spezifische Code von js zur Erzielung des Wasserfallflusseffekts als Referenz angegeben. Der spezifische Inhalt ist wie folgt
Quellcode:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
.Kasten {
Breite: 70px;
schweben: links;
Rand links: 4px;
Rahmen oben: 1px durchgezogen #000;
}
ul,
ol,
li {
Listenstiltyp: keiner;
}
li {
Breite: 70px;
Anzeige: Block;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<ul Klasse="Box"></ul>
<ul Klasse="Box"></ul>
<ul Klasse="Box"></ul>
<ul Klasse="Box"></ul>
<button onclick="reloadPage()">Seite aktualisieren</button>
</body>
</html>
<Skript>
var Boxen = document.querySelectorAll(".box");
//Minimalwert erstellen var min = 0;
//Erstellen Sie ein Farbarray var colour = ["rot", "gelb", "orange", "blau", "lila", "grün","#cdee","#feda","ccc","#eda","#639","#33f","#f38","#ca0"]
für (j = 1; j <= 50; j++) {
var lis = document.createElement("li"); //Li mit Zahlen erstellen
lis.innerHTML = j;
lis.style.height = Math.random() * 40 + 30 + "px"; //Zufällige Höhe abrufen, die Mindesthöhe beträgt 30px
lis.style.backgroundColor = colour[parseInt(Math.random() * colour.length-1)]; //Zufällige Farbe abrufen für (var i = 0; i < boxes.length; i++) {
console.log(boxs[i].clientHeight);
// offsetHeight liefert die Elementhöhennummer if (boxs[i].offsetHeight < boxes[min].offsetHeight) {
min = i; //Holen Sie sich die Sequenznummer des Array-Elements mit der kleinsten Höhe}
}
boxes[min].appendChild(lis) //Füge li zum kürzesten ol hinzu}
Funktion reloadPage() {
location.reload(); // aktualisieren}
</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 Analyse des Explain-Ausführungsplans in MySQL
>>: Detaillierte Erklärung der Lösung für den 404-Fehler von Tomcat
Artikel empfehlen
Detailliertes Tutorial zur Installation von mysql-8.0.20 unter Linux
** Installieren Sie mysql-8.0.20 unter Linux ** U...
Apache Calcite-Code zur Dialektkonvertierung
Definition Calcite kann SQL vereinheitlichen, ind...
Detaillierte Erklärung zur Verwendung der Linux-Umleitung
Ich glaube, dass jeder manchmal Daten kopieren un...
Eine kurze Analyse des Kimono-Memo-Problems
Heute musste ich nach dem Neustart des Spiels fes...
Implementierungsschritte für die Docker-Bereitstellung lnmp-wordpress
Inhaltsverzeichnis 1. Experimentelle Umgebung 2. ...
Eine kurze Diskussion über den Unterschied zwischen src und href in HTML
Einfach ausgedrückt bedeutet src „Ich möchte dies...
Beispielcode für CSS zum Erzielen eines Bildzoomeffekts und eines langsamen Übergangseffekts beim Bewegen der Maus
transform:scale() lässt sich ein proportionales V...
Lösung für die durch die obere feste Navigationsleiste blockierte CSS-Ankerpositionierung
Viele Websites verfügen oben über eine feste Navi...
Docker-Installations- und Konfigurationsschritte für das Redis-Image
Inhaltsverzeichnis Vorwort Umfeld Installieren Er...
MySQL-unabhängiger Index und gemeinsame Indexauswahl
Häufig fehlt das Verständnis für mehrspaltige Ind...
Implementierung eines einfachen Timers basierend auf der Vue-Methode
Der einfache Timer von Vue dient Ihnen als Refere...
So installieren Sie Phabricator mit Docker
Ich verwende hier das Ubuntu 16.04-System. Instal...
js, um einfache Lupeneffekte zu erzielen
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie den Skeleton-Bildschirm im Vue-Projekt
Heutzutage ist die Anwendungsentwicklung grundsät...
Zusammenfassung des MySQL-Installationsdiagramms
Grafisches Tutorial zur Installation und Konfigur...