CSS3 erzielt einen unendlichen Scroll-/Karusselleffekt der Liste
|
Effektvorschau
Ideen
Problem 1. Wie implementiere ich ein Endloskarussell? Das Problem ist, dass beim Scrollen der Liste bis zum Ende unten ein leerer Bereich (zusätzlicher Platz) verbleibt. Wie gehe ich damit um? 2. Wie können Benutzer unbemerkt zum ersten Element zurückkehren? Kontrollieren Sie nach dem Hinzufügen der doppelten Elemente den Umschaltzeitpunkt und wechseln Sie sofort, wenn die Liste zum Ende des letzten Elements (dem Anfang des ersten Elements des doppelten Elements) gescrollt ist. Zum Beispiel: Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Liste mit unendlichem Scrollen</title>
</Kopf>
<Stil>
.container {
Position: relativ;
Hintergrundfarbe: #a4ffcc;
/* Der übergeordnete Container muss eine lichte Höhe haben */
Höhe: 150px;
Breite: 200px;
Rand: automatisch;
Überlauf: versteckt;
}
.container > .scroll-list {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Animation: Scrollen 6 s linear unendlich normal;
}
.container > .scroll-list > div {
Breite: 100 %;
/* Das scrollbare Element muss eine bestimmte Höhe haben */
Höhe: 30px;
Hintergrundfarbe: #1ea7ff;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Farbe: weiß;
}
.container > .scroll-list > div:nth-child(2n) {
Hintergrundfarbe: #18d9f8;
}
@keyframes scrollen {
100 % {
/*Gesamthöhe des zu scrollenden Inhalts*/
oben: -300px;
}
}
</Stil>
<Text>
<div Klasse="Container">
<div Klasse="Scrollliste">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<!-- Der folgende Code ermöglicht es, dass der scrollende Inhalt einen weiteren Bildschirm anzeigt (Leerzeichen/unendliches Karussell entfernen): Bitte berechnen Sie die Zahl entsprechend der Höhe-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
</body>
</html>Dies ist das Ende dieses Artikels über die Implementierung von unendlichem Scrollen/Karussells von Listen mit CSS3. Weitere relevante CSS3-Inhalte zum Scrollen von Listen und Karussells finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: So importieren Sie CSS-Stile in externe HTML-Stylesheets
Artikel empfehlen
Lösung für das Problem des MySQL-Master-Slave-Switch-Kanals
Nach der VIP-Konfiguration wird beim Aktiv/Standb...
Detaillierte Erklärung des Vue-Elements plus Mehrsprachenumschaltung
Inhaltsverzeichnis Vorwort Wie wechselt man zwisc...
So stellen Sie zabbix_agent in Docker bereit
zabbix_agent-Bereitstellung: Empfehlung: zabbix_a...
Zusammenfassung verschiedener Möglichkeiten zum Erstellen von Objekten in js und ihrer Vor- und Nachteile
Inhaltsverzeichnis Frühe Erstellungsmethode Fabri...
CSS setzt die Höhe des Box-Containers (div) immer auf 100 %
Vorwort Manchmal muss die Höhe eines Box-Containe...
Vue ruft die PC-Kamera auf, um die Fotofunktion zu realisieren
In diesem Artikelbeispiel wird der spezifische Co...
Konfigurationsschritte für die MySQL-Gruppenreplikation (empfohlen)
MySQL-Group-Replication ist eine neue Funktion, d...
Definition und Funktion des zoom:1-Attributs in CSS
Heute wurde ich gefragt, wozu das Zoom-Attribut i...
Bei der SQL-Optimierung treten häufig Fehler auf, weil Sie die Verwendung von MySQL nicht verstehen.
Inhaltsverzeichnis 1. Vorbereitung 2. Einführung ...
Lassen Sie uns ausführlich über die gemeinsame MySQL-Abfrage sprechen
Inhaltsverzeichnis Union-Abfrage 1. Fragen Sie di...
CSS3-Implementierungscode für einfaches Karussellbildschneiden
Umsetzungsideen Erstellen Sie zunächst einen über...
Detaillierte Erklärung zur Verwendung relativer Pfade in HTML, um Dateien auf allen Verzeichnisebenen abzurufen
Das Konzept des relativen Pfades Verwenden Sie de...
MySQL-Löschfunktion für Mehrfachtabellenverbindungen
Löschen einer einzelnen Tabelle: LÖSCHEN AUS Tabe...
Lösen Sie das Sprungproblem des mobilen Endgeräts (CSS-Übergang, Ziel-Pseudoklasse).
Vorwort Viele Freunde, die gerade mit mobilen End...
Spezifikationen für Hyperlink-Symbole: Verbessern Sie die Lesbarkeit von Artikeln
1. Was ist die Hyperlink-Symbol-Spezifikation ?&l...