Beispielcode für nahtloses Scrollen mit Flex-Layout

In diesem Artikel wird hauptsächlich der Beispielcode des Flex-Layouts zum Erreichen eines nahtlosen Scrollens vorgestellt, der wie folgt mit Ihnen geteilt wird:

Falldemonstration

Flexibles Layout

Das sogenannte Flex-Layout ist ein elastisches Box-Layout. Dieses Layout wird häufiger auf Mobilgeräten verwendet, aber mit der Aktualisierung der Browserversionen wird das Flex-Layout aufgrund seiner eigenen Vorteile immer häufiger verwendet.

Ideen:

• Lassen Sie uns zunächst die Struktur dieser kleinen Demo analysieren, die obere und untere Struktur. Wir können einen Container verwenden, um sie einzuhüllen (die sogenannte Big Box).
• Oben gibt es eine Navigation und darüber ein UL und darunter können wir zwei Divs verwenden, mit einer Breite von 100 % und einer benutzerdefinierten Höhe.
• Als nächstes öffnen und modellieren wir. Denken Sie an die bestimmte übergeordnete Box! display:flex;, wie teilt man es dann nach oben und unten auf? Wenn wir weiterhin flex-wrap: wrap; hinzufügen, wird oben und unten getrennt. Ist das nicht praktisch?
• Als nächstes kommt der untere Teil. Die UL ist im Div verschachtelt, und die Höhe der UL ist leicht zu verstehen: Es ist die Höhe des Div. Wie breit ist also die UL? , kann unendlich breit sein! ! ! Wir setzen die Breite von ul auf 3000px
• Als nächstes setzen wir li. Sie können sehen, dass li auch eine obere und untere Struktur hat, also, hehe! Muss li auch Flex aktivieren? flex-wrap: wrap; Das obige Div ist für img und darunter befindet sich ein A-Tag.
• Denken Sie daran, Li sollte schweben! Und denken Sie daran, overflow:hidden dort zu platzieren

Animationseffekte

• Wir haben fünf Bilder und lassen sie nun von rechts nach links wandern. Wenn wir ul also auffordern, sich zu bewegen, kann es dann li dazu veranlassen, sich zu bewegen?
• Wir verwenden @keyframes, um den linken Wert von ul zu ändern, aber hier tritt das Problem auf. Wenn ich fünf Bilder einfüge und ul sich bewegt, verschwindet die rechte Seite und wird leer. Was zu tun? ? ?
• Können wir die fünf Li kopieren und nach hinten legen? Die Antwort ist ja! ! Wenn unsere Linke nur die erste Gruppe von Li entfernt, dann kommt die zweite Gruppe einfach nicht vor. Dann verwenden wir die Animation: 20 Sekunden linear und unendlich ausführen; Endlosschleife, richtig?

CSS-Teilcode

* {
    Rand: 0;
    Polsterung: 0;
}

A {
    Textdekoration: keine;
}

.box-groß {
    Position: absolut;
    Anzeige: Flex;
    links: 50%;
    oben: 50 %;
    Rand: 1px durchgezogen #9FD6FF;
    transformieren: übersetzen(-50 %, -50 %);
    Breite: 707px;
    Höhe: 170px;
    /* Hintergrundfarbe: rosa; */
    Flex-Wrap: Umwickeln;
    Überlauf: versteckt;
}

.box-top {
    Breite: 707px;
    Höhe: 30px;
    Rahmen unten: 1px durchgezogen #9FD6FF;
    Hintergrundfarbe: #FEFEFE;
}

.div-unten {
    Breite: 707px;
    Höhe: 136px;
    /* Hintergrundfarbe: dunkelgoldenrod; */
    Überlauf: versteckt;
}

.st-icon-android {
    Anzeige: Inline-Block;
    Breite: 15px;
    Höhe: 15px;
    Hintergrundbild: URL (../img/hd.gif);
    Rand: 8px;
}

h5 {
    Position: absolut;
    oben: 6PX;
    links: 30px;
    Farbe: #307DD1;
}

ul {
    Position: absolut;
    links: 90px;
    Breite: 3000px;
    Höhe: 100%;
    Animation: 20 s linear und unendlich laufen;
}

li {
    Listenstil: keiner;
    schweben: links;
    Breite: 140px;
    Höhe: 100%;
    Rand: 0,5px 0,5px;
    /* Hintergrundfarbe: Gold; */
    Flex-Wrap: Umwickeln;
}

.Foto {
    Rand oben: 5px;
    Breite: 140px;
    Höhe: 105px;
    Textausrichtung: zentriert;
    /* Hintergrundfarbe: Frühlingsgrün; */
}

P {
    Textausrichtung: zentriert;
}

img {
    Cursor: Zeiger;
}

@keyframes ausführen {
    0% {
        links: 0;
    }
    100 % {
        links: -745px;
    }
}

Damit ist dieser Artikel mit Beispielcode zur Implementierung von nahtlosem Scrollen mit flexiblem Layout abgeschlossen. Weitere Informationen zum nahtlosen Flex-Scrollen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!