JS implementiert das Auf- und Abgleiten auf dem mobilen Endgerät, jeweils einen Bildschirm nach dem anderen

In diesem Artikel erfahren Sie den spezifischen JS-Code, mit dem das mobile Endgerät jeweils einen Bildschirm nach oben und unten gleiten kann. Der spezifische Inhalt ist wie folgt

Die Funktionen sind wie folgt:

Kopfzeile: Wechseln Sie zwischen den Registerkarten „In der Nähe“, „Folgen“ und „Empfohlen“
Links- und Rechtsschiebefunktion, Kopfregisterkarte folgt Animation
Wischen Sie nach oben und unten, um über den Bildschirm zu wischen, und aktualisieren Sie, wenn Sie über den oberen Bildschirmrand hinaus wischen
Doppelklicken Sie auf die Registerkarte, um zum Anfang zurückzukehren

Oben genannter 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;
            -moz-Benutzerauswahl: keine;
            /* Feuerfuchs */
            -webkit-Benutzerauswahl: keine;
            /*WebKit-Browser*/
            -ms-user-select: keine;
            /*IE10*/
            -khtml-Benutzerauswahl: keine;
            /* Frühe Browser */
            Benutzerauswahl: keine;
        }

        #Kasten {
            Breite: 350px;
            Höhe: 500px;
            Rand: 30px automatisch;
            Rahmenradius: 5px;
            Box-Schatten: 0px 0px 27px -3px rot;
            -Webkit-Randradius: 5px;
            -moz-Randradius: 5px;
            -ms-border-radius: 5px;
            -o-Randradius: 5px;
            Überlauf: versteckt;
            Position: relativ;
            Hintergrundfarbe: #ccc;
        }

        .childbox {
            Breite: 300%;
            Höhe: 100%;
            Anzeige: Flex;
            Position: absolut;
            oben: 0;
            links: 0;
        }

        .childbox>div {
            biegen: 1;
            Höhe: 100%;
        }

        .Kind1 {
            Hintergrundfarbe: lachs;
        }

        .Kind2 {
            Hintergrundfarbe: grüngelb;
        }

        .Kind3 {
            Hintergrundfarbe: blauviolett;
        }

        .nav_box {
            Position: absolut;
            Breite: 100 %;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
        }

        .nav_box div {
            Anzeige: Inline-Block;
            Farbe: #fff;
            Rand: 0,5px;
            Position: relativ;
        }

        .active_nav::vor {
            Inhalt: '';
            Position: absolut;
            Hintergrundfarbe: #fff;
            links: 2px;
            unten: 7px;
            Breite: 27px;
            Höhe: 2px;
        }

        .childbox>div {
            Position: relativ;
        }

        .childbox>div .listview {
            Breite: 100 %;
            Position: absolut;
        }

        .view_child {
            Textausrichtung: zentriert;
            Zeilenhöhe: 200px;
            Farbe: #fff;
            Schriftgröße: 25px;
        }
    </Stil>
</Kopf>

<Text>
    <div id="box">
        <div Klasse="Unterbox">
            <div Klasse="Kind1">
                <div Klasse="Listenansicht" Typ="in der Nähe">

                </div>
            </div>
            <div Klasse="Kind2">
                <div Klasse="Listenansicht" Typ="Folgen">

                </div>
            </div>
            <div Klasse="Kind3">
                <div Klasse="Listenansicht" Typ="empfehlen">

                </div>
            </div>
        </div>
        <div Klasse="Navigationsbox">
            <div>In der Nähe</div>
            <div>Folgen</div>
            <div class="active_nav">Empfehlungen</div>
        </div>
    </div>
</body>
<Skript>

    //Animationsfeld abrufen let childbox = document.querySelector('.childbox')
    //Bildschirmhöhe abrufen let viewheight = document.querySelector('#box').offsetHeight
    //Gesamte Navigation abrufen let childnav = document.querySelector('.nav_box').querySelectorAll('div')
    //Videotypfeld abrufen let viewlist = document.querySelectorAll('.listview')
    //Navigationsindex (0, in der Nähe, 1, Achtung, 2 empfohlen)
    lass Indextyp = 2
    //Index der Videowiedergabe (0: In der Nähe, 1: Folgen, 2: Empfohlen) [Index, Anzahl der Videos, Seitenzahl]
    lass view_index = {
        0: [0, 0, 1],
        1: [0, 0, 1],
        2: [0, 0, 1]
    }
    //Navigation initialisieren set_nav_active(indextype)
    //Navigation ausgewählter Status Funktion set_nav_active(index) {
        // Lösche den ausgewählten Status für (let i = 0; i < childnav.length; i++) {
            childnav[i].className = ''
        }
        //Wert zum ausgewählten Childnav hinzufügen[index].className = 'active_nav'
        //Position der Box ändern childbox.style.left = index * -100 + '%'
    }
    //Klickereignis zur Navigation hinzufügen for (let i = 0; i < childnav.length; i++) {
        childnav[i].onclick = Funktion () {
            //Übergangsanimation hinzufügen childbox.style.transition = 'alle 0,5 s'
            //Klick-Navigationsstatus ändern indextype = i
            set_nav_active(Indextyp)
        }
    }
    //Nach links und rechts schieben let box = document.querySelector('#box')
    //Ob die Animation beendet ist, let transition_status = true
    //Box drücken.onmousedown = function (event) {
        //Feststellen, ob die Animation ausgeführt werden kann, wenn (!transition_status) {
            zurückkehren
        }
        // Koordinatenwert abrufen let startY = event.clientY
        let startX = event.clientX
        // Ob mit der Beurteilung fortgefahren werden soll, let t_l_type = true
        //Ermitteln Sie den Status des Auf-Ab- oder Links-Rechts-Gleitens (0: keine Bewegung; 1: links-rechts; 2: Auf-Ab)
        lass move_type = 0
        //Animationsverhalten aufzeichnen (1: nach unten ziehen, 2: nach oben und unten, 3: nach links und rechts, 0: keine Bewegung)
        let Übergangstyp = 0
        // Links und rechts starten
        // Box-Animation löschen childbox.style.transition = ''
        //Linke Position der Box abrufen let startleft = childbox.offsetLeft
        // Ob der Schieberegler umgeschaltet werden soll, let type = {
            a: falsch,
            B: ''
        }
        //links und rechts vorbei
        //Nach oben und unten schieben //Initialisierungsposition des Schiebers let startTop = viewlist[indextype].offsetTop
        //Beurteilen, ob gewechselt werden soll let top_type_view = {
            a: false, //Umschalten oder nicht b: '', //Beurteilen, ob hoch- oder heruntergeschaltet werden soll}
        console.log(startTop)
        //Auf und ab
        //Zum Aktualisieren nach unten ziehen //Animation löschen viewlist[indextype].style.transition = '';
        // Die Pulldown-Distanz aufzeichnen let b_top = 0
        //Herunterziehen über
        document.onmousemove = Funktion (Ereignis) {
            //Koordinaten bei Bewegung abrufen let moveY = event.clientY
            let moveX = event.clientX
            //Einen Schalter hinzufügen, um zu bestimmen, ob ein Schalter hinzugefügt werden soll, wenn (t_l_type) {
                //Beurteilen, ob nach links oder rechts oder oben oder unten geschoben werden soll, wenn (Math.abs(moveY - startY) > 5) {
                    // Stoppen Sie das nächste Urteil t_l_type = false
                    //Gleitstatus aufzeichnen move_type = 2
                }
                wenn (Math.abs(moveX - startX) > 5) {
                    // Stoppen Sie das nächste Urteil t_l_type = false
                    //Gleitstatus aufzeichnen move_type = 1
                }
            }
            //Beurteile den Gleitcode if (move_type == 2) {
                // Für das Herunterziehen sind zwei Bedingungen erforderlich: 1. Es befindet sich nichts im Pulldown. 2 if (view_index[indextype][0] == 0 && moveY - startY > 0) {
                    console.log('herunterziehen')
                    //Animationsstatus ändern transition_type = 1
                    //Berechnen Sie die Pulldown-Distanz b_top = moveY - startY
                    //Ziehen Sie das Ansichtsfeld viewlist[indextype].style.top = b_top + 'px'
                    zurückkehren
                }
                //Auf- und Ab-Gleiten ausführen //Auf- und Ab-Gleiten beim Herunterziehen ablehnen if (transition_type != 1) {
                    //Animationsstatus ändern transition_type = 2
                    //Position verschieben let moveY = event.clientY
                    //Berechnen Sie die Distanz, die für die Auf- und Abbewegung benötigt wird let num = moveY - startY
                    //Ändern Sie den oberen Wert des Drag-Elements viewlist[indextype].style.top = startTop + num + 'px'
                    //Beurteilen, ob gewechselt werden soll, if (num > 70) {
                        top_type_view.a = wahr
                        top_type_view.b = "Oben"
                    } sonst wenn (Zahl < -70) {
                        top_type_view.a = wahr
                        top_type_view.b = "unten"
                    }
                }
            } sonst wenn (Bewegungstyp == 1) {
                // Code links und rechts // Animationsstatus ändern transition_type = 3
                //Position verschieben let moveX = event.clientX
                //Bewegungsdistanz let num = moveX - startX
                //Der von der Box benötigte linke Wert childbox.style.left = startleft + num + 'px'
                //Gleitrichtung if (moveX > startX) {
                    wenn (Zahl > 100) {
                        Typ.a = wahr
                        Typ.b = "rechts"
                    }
                } sonst wenn (BewegungX < StartX) {
                    wenn (Zahl < -100) {
                        Typ.a = wahr
                        Typ.b = "links"
                    }
                }
                // über
            }

        }
        //Fenster anheben.onmouseup = function () {
            //Gleitereignis löschen document.onmousemove = ''
            //Beurteile die Ausführungsanimation, wenn (Übergangstyp == 1) {
                //Nach unten ziehen//Animation hinzufügen viewlist[indextype].style.transition = 'alle .5s';
                //Beurteilen Sie die Zugdistanz, um zu bestimmen, ob aktualisiert werden soll, if (b_top > 70) {
                    //Animation ausführen transition_status = false
                    Ansichtsliste[Indextyp].style.top = '70px'
                    setzeTimeout(Funktion () {
                        Ansichtsliste[Indextyp].style.top = "0px"
                        //Beginnen Sie mit der ersten Seite view_index[indextype][2] = 1
                        Autoansicht (Indextyp)
                        //Animation wiederherstellen setTimeout(() => {
                            Übergangsstatus = wahr
                        }, 500);
                    }, 2000)
                } anders {
                    Ansichtsliste[Indextyp].style.top = "0px"
                }
            } sonst wenn (Übergangstyp == 2) {
                //Auf und ab //Übergangsanimation hinzufügen viewlist[indextype].style.transition = 'alle .5s';
                //Beurteile die auszuführende Animation, wenn (top_type_view.a) {
                    //Auf- und Ab-Umschaltung beurteilen if (top_type_view.b == 'up') {
                        //Indexänderung view_index[indextype][0]--
                        wenn (Ansichtsindex[Indextyp][0] <= -1) {
                            view_index[indextyp][0] = 0
                        }
                        Ansichtsliste[Indextyp].style.top = Ansichtsindex[Indextyp][0] * -Ansichtshöhe + 'px'
                        console.log('nach oben')
                    } sonst wenn (top_type_view.b == 'down') {
                        view_index[indextyp][0]++
                        wenn (Ansichtsindex[Indextyp][0] >= Ansichtsindex[Indextyp][1] - 2) {
                            //Erstelle ein neues Video mit automatischer Ansicht (Indextyp)
                        }
                        Ansichtsliste[Indextyp].style.top = Ansichtsindex[Indextyp][0] * -Ansichtshöhe + 'px'
                    }
                } anders {
                    //Den bestehenden Zustand wiederherstellen viewlist[indextype].style.top = startTop + 'px'
                }
            } sonst wenn (Übergangstyp == 3) {
                //Links und rechts //Ausführen, um zu bestimmen, ob gewechselt werden soll, if (type.a) {
                    wenn (Typ.b === 'links') {
                        Indextyp++
                        wenn (Indextyp >= 3) {
                            Indextyp = 2
                        }
                    } sonst wenn (Typ.b === 'rechts') {
                        Indextyp --
                        wenn (Indextyp <= -1) {
                            Indextyp = 0
                        }
                    }
                }
                //Übergang hinzufügen childbox.style.transition = 'alle 0,5 s'
                //Rufen Sie die Umschaltfunktion set_nav_active(indextype) auf
            }
            //Nächstes Urteil wiederherstellen t_l_type = true
            //Nächsten Status wiederherstellen move_type = 0
            //Animationsstatus wiederherstellen transition_type = 0
        }
    }


    //Zufällige Hintergrundfarbe Funktion autocolor() {
        gibt `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})` zurück.
    }
    //Standardmäßig Videoliste generieren für (let i = 0; i < viewlist.length; i++) {
        autoview(i)
    }
    //Videoliste generieren Funktion autoview(index) {
        //Videotyp abrufen let type = viewlist[index].getAttribute('type')
        //Anzahl der Videos ändern if (view_index[index][2] == 1) {
            // Vorhandenen Inhalt löschen viewlist[indextype].innerHTML = ''
            //Videomenge aufzeichnen view_index[index][1] = 10
        } anders {
            //Anzahl der Videos akkumulieren view_index[index][1] += 10
        }
        //Index eingefügt Index für (let i = 0; i < 10; i++) {
            //Dom erstellen
            let div = Dokument.createElement('div')
            //Name div.Klassenname = "view_child"
            //Inhalt div.innerHTML = `
            <div>${Typ}:${(view_index[index][2] - 1) * 10 + i + 1}</div>
            <hr></hr>
            <div>Seitenzahl: ${view_index[index][2]}</div>
        `
            //Hintergrundfarbe festlegen div.style.backgroundColor = autocolor()
            //Boxhöhe festlegen div.style.height = viewheight + 'px'
            //Viewlist[index].appendChild(div) anhängen
        }
        //Ändere die nächste Seitenzahl view_index[index][2]++
        console.log(Index anzeigen)
    }

    //Doppelklicken, um oben zu bleiben let nav_box = document.querySelector('.nav_box')
    nav_box.ondblclick = Funktion () {
        Ansichtsliste[Indextyp].style.transition = "alle 0,5 Sek."
        Ansichtsliste[Indextyp].style.top = "0px"
        view_index[indextyp][0] = 0
    }
</Skript>

</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:

js realisiert den Unterstreichungs-Gleiteffekt beim Wechseln der Tabs auf mobilen Endgeräten
Swiper.js implementiert das Links- und Rechtsgleiten mobiler Elemente
Ein Beispiel für die Verwendung von JS zur nativen Implementierung des Finger-Gleitkarusselleffekts auf Mobilgeräten
JS implementiert Beispielcode für die Vollbild-Verschiebung eines mobilen Endgeräts
js realisiert den automatischen Gleiteffekt beim Klicken auf die mobile Navigation
Nativer Javascript-Mobil-Schiebebanner-Effekt
Basierend auf JS erscheint die Löschtaste, wenn man auf dem mobilen Endgerät nach links wischt
Implementierung mobiler Sidebar-Schiebeeffekte basierend auf slideout.js
Eine kurze Diskussion über das JS-Touch-Event-Gesten-Schiebe-Event auf mobilen Endgeräten
JavaScript implementiert die Funktion zur Auswahl des gleitenden Datums auf mobilen Endgeräten

<<: Zusammenfassung der Unterschiede zwischen den MySQL-Speicher-Engines MyISAM und InnoDB

>>: So entwickeln Sie Java 8 Spring Boot-Anwendungen in Docker