JavaScript zum Erzielen eines Vollbild-Seiten-Scrolleffekts

Nachdem ich mit der Lektüre von JavaScript DOM fertig war, verfügte ich über ein tieferes Verständnis der interpretierten JavaScript-Skriptsprache und konnte meinen JavaScript-Code stärker standardisieren.

Kommen wir als Nächstes zum technischen Problem, das ich heute mit Ihnen teilen möchte: dem Scrollen auf einer Vollbildseite.

Der implementierte Code ist sehr einfach, doch um die darin enthaltenen Probleme zu entdecken, sind langjährige Erfahrung, Leseerfahrung und eine Menge Vorstellungskraft des Programmierers erforderlich.

Schauen wir uns zunächst die beiden endgültigen Renderings und den von console.log ausgegebenen Inhalt an:

1. Klicken Sie auf Seite 2 Effekt und Druckergebnis:

Nach dem Klicken wird im Timer pagelist[this.index].rollCount eine Wertefolge ausgedruckt, die Math.ceil(rollData.num) lautet. Nach 5 Sekunden wird automatisch ein weiterer Zähler ausgeführt, um den Timer pagelist[this.index].rollCount zu löschen.

2. Klicken Sie erneut auf Seite 2 und das gedruckte Ergebnis:

Nach dem Klicken wird zunächst geprüft, ob der Timer pagelist[this.index].rollCount vorhanden ist. Wenn dies der Fall ist, wird er gelöscht. Wenn die dem Klick entsprechende Seite erreicht wurde, wird ausgedruckt, dass er nicht ausgeführt wurde, und zurückgekehrt.

Nähere Informationen hierzu finden Sie in den Beispielen weiter unten. Dort werden verschiedene Situationen ausführlich erläutert.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Seitenumblättereffekt im Vollbildmodus</title>
    <Stil>
        * {
            Polsterung: 0;
            Rand: 0;
        }
 
        html, Text {
            Breite: 100 %;
            Höhe: 100%;
            Farbe: #fff;
        }
 
        ul {
            Listenstil: keiner
        }
 
        #nav {
            Position: fest;
            oben: 50px;
            links: 50px;
        }
 
        #nav li {
            Breite: 80px;
            Höhe: 50px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
            Rand: 2px durchgezogen #fff;
            Cursor: Zeiger;
        }
 
        #nav li:ntes-Kind(1) {
            Hintergrund: #f60;
        }
 
        #nav li:ntes-Kind(2) {
            Hintergrund: #63c;
        }
 
        #nav li:ntes-Kind(3) {
            Hintergrund: #3c6;
        }
 
        #nav li:ntes-Kind(4) {
            Hintergrund: #f9c;
        }
 
        #Seite {
            Breite: 100 %;
            Höhe: 100%;
        }
 
        #Seite li {
            Breite: 100 %;
            Höhe: 100%;
        }
    </Stil>
</Kopf>
<Text>
<ul id="Seite">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="nav">
    <li>Seite 1</li>
    <li>Seite 2</li>
    <li>Seite 3</li>
    <li>Seite 4</li>
</ul>
<Skript>
    Funktion rollingPage() {
        var pageul = document.getElementById("Seite");
        var Seitenliste = Seitenliste.Kinder;
 
        var navul = document.getElementById("nav");
        var navlist = navul.children;
 
        für (i = 0; i < navlist.length; i++) {
            //Alle Stile abrufen getComputedStyle
            var bgcolor = getComputedStyle(navlist[i], "").backgroundColor;
// Alarm (Hintergrundfarbe);
            Seitenliste[i].style.background = Hintergrundfarbe;
 
            //Definiere ein Indexobjekt für das aktuelle Element und speichere den Index des aktuellen Elements navlist[i].index = i;
 
            //Variablen als Objekte deklarieren var rollData = {
                Zahl: 0,
                Ziel: 0
            };
            navlist[i].onclick = Funktion () {
 
                //Der Abstand zwischen der Seite, die der angeklickten Schaltfläche entspricht, und dem oberen Rand der gesamten Seite rollData.target = pagelist[this.index].offsetTop;
 
                //Ermitteln, ob das angeklickte Element das aktuelle ist. Wenn ja, nicht mit der Ausführung fortfahren var h = window.innerHeight || document.documentElement.clientHeight 
                    || Dokument.Body.ClientHeight;
                var x = dieser.index;
                //Beurteilen Sie, ob die Seite, die der aktuell angeklickten Schaltfläche entspricht, einen Elementattribut-Timer hat, wenn (pagelist[this.index].rollCount) {
                    console.log("existiert");
                    ClearInterval(Seitenliste[diesen.index].rollCount);
 
                    /*Verhindern Sie, dass wiederholtes Klicken zu einer direkten Rückkehr führt und dazu, dass die Seite nicht vollständig geladen wird. Fügen Sie daher eine Entscheidung hinzu, um dies zu verhindern.
                     * Auf diese Weise, auch wenn die Seite nicht vollständig erreicht wird, auch nachdem das oben genannte gelöscht wurde,
                       *Der Zähler pagelist[this.index].rollCount wird ebenfalls nach unten ausgeführt
                     * */
                    /*Aber ich habe festgestellt, dass die Dinge nie perfekt sein werden und ständig verbessert werden müssen.
                     *Als ich gerade mit meinem Freund chattete, klickte ich erneut auf die Schaltfläche für die aktuelle Seite.
                       *Ich habe jedoch festgestellt, dass die unten stehende Rückgabe nicht ausgeführt wurde.
                     *Sehen Sie sich noch einmal den im Zähler gedruckten Wert von Math.ceil(rollData.num) an, der 1 ist.
                     *Daher gilt: Math.ceil(rollData.num) + 1 == h * x || 
                     *Math.ceil(rollData.num) - 1 == h * x
                     *
                     * Ein weiterer Grund hierfür ist, dass
                       * bei window.scrollTo(0, Math.ceil(rollData.num) + 1)
                     * und nach dem Subtrahieren von eins und ohne Hinzufügen von Alkali ist der gespeicherte Wert Math.ceil(rollData.num) ohne Hinzufügen von Alkali.
                     * */
                    wenn (Math.ceil(rollData.num) + 1 == h * x || 
                             Math.ceil(rollData.num) - 1 == h * x || 
                                   Math.ceil(rollData.num) == h * x) {
                        console.log("Nicht ausgeführt");
                        //Wenn es existiert und der Wert, zu dem die Bildlaufleiste scrollt, der aktuellen Seite entspricht,
                          //Der Zähler wird nicht abwärts ausgeführt.
                        zurückkehren;
                    }
                }
 
                //Timer zum Scrollen der Seite pagelist[this.index].rollCount = setInterval(function () {
                    //Math.ceil() rundet in Richtung größer als rollData.num = rollData.num + 
                                     (Rolldaten.Ziel - Rolldaten.Nummer) / 10;
                    Konsole.log(Math.ceil(rollData.num));
              //1. Bewegen Sie die Bildlaufleiste an die Position h*x, window.scrollTo()
             //2. Bestimmen Sie den Fall, in dem der absolute Wert des Attributs rollData.num nach der Übernahme durch Math.ceil vor und nach x*h 1 beträgt. //Der Grund für die beiden obigen Operationen ist, dass beim Drucken des Werts von Math.ceil(rollData.num) manchmal festgestellt wird, dass //die Differenz zwischen dem Wert vor und nach x*h 1 beträgt
                    wenn (Math.ceil(rollData.num) + 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) + 1);
                    } sonst wenn (Math.ceil(rollData.num) - 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) - 1);
                    } anders {
                        window.scrollTo(0, Math.ceil(rollData.num));
                    }
                }, 30);
 
                /*Nach 5 Sekunden kann, wenn die Bedingungen erfüllt sind, der Zähler pagelist[x].rollCount gelöscht werden, um zu verhindern, dass der obere Zähler kontinuierlich weiterläuft* */
                setzeTimeout(Funktion () {
                    //Nach fünf Sekunden, wenn Math.ceil(rollData.num) und die Differenz zwischen dem vorherigen und dem nächsten 1 ist,
                        // Lösche den Timer oben, wenn (Math.ceil(rollData.num) + 1 == h * x || 
                           Math.ceil(rollData.num) - 1 == h * x || 
                               Math.ceil(rollData.num) == h * x) {
                        console.log("Automatisch löschen" + x);
                        clearInterval(pagelist[x].rollCount);
                    }
                }, 5000);
            }
        }
    }
 
    Fügt ein LoadEvent hinzu (RollingPage);
    Funktion addLoadEvent(Funktion) {
        var oldonload = fenster.onload;
        wenn (Typ von Fenster.beim Laden != 'Funktion') {
            Fenster.onload = Funktion;
        } anders {
            fenster.onload = Funktion () {
                altonload();
                Funktion();
            }
        }
    }
</Skript>
</body>
</html>

Nachdem ich die oben genannte Optimierung abgeschlossen hatte, stellte ich fest, dass ich in Zukunft noch mehr Bücher lesen, auf Open-Source-Websites von Experten geschriebene Codes lesen und ständig meine Vorstellungskraft nutzen muss, um meinen eigenen Code zu verbessern.

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, um den Vollbildmodus einer einfachen Seite zu erreichen
js simuliert die Vollbildanzeige der F11-Seite
js steuert die Vollbildanzeige der Seite und die Methode zum Verlassen der Vollbildanzeige
Javascript-Vollbildmethode zum Anzeigen von Seitenelementen im Vollbildmodus
JS implementiert die Methode zur Beurteilung, dass die Bildlaufleiste bis zum Ende der Seite gescrollt ist, und führt das Ereignis aus
js, jQuery-Scrollen/Sprungseite zur angegebenen Position Implementierungsideen
js überwacht die Scroll-Ereignismethode der HTML-Seite
Wenn die Bildlaufleiste zum unteren Seitenende scrollt, wird der JS-Code zum automatischen Hinzufügen von Inhalten geladen
js ermittelt, ob die Scrollleiste den unteren oder oberen Rand der Seite erreicht hat
js implementiert eine Bildlaufleiste, um zum unteren Rand der Seite zu scrollen und mit dem Laden fortzufahren

<<: So legen Sie die Breite und Höhe von HTML-Tabellenzellen fest

>>: Detaillierte Analyse der Auswahl des MySQL-Gemeinschaftsindex und des eindeutigen Index

Detailliertes Beispiel für die JSON-Analyse mit MySQL (5.6 und darunter)

JavaScript zum Erzielen eines Vollbild-Seiten-Scrolleffekts

Detailliertes Beispiel für die JSON-Analyse mit MySQL (5.6 und darunter)

Implementierung eines einfachen Gobang-Spiels mit nativem JavaScript

JavaScript zum Implementieren der Inhaltsaufforderung und der versteckten Funktion des Eingabefelds

Standards zum Schreiben von Codekommentaren bei der Webseitenerstellung

IP-Whitelist für die Linux-Serverkonfiguration zum Verhindern von Remote-Anmeldungen und Port-Offenlegung

So aktualisieren Sie https unter Nginx

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.25

Implementierung eines einfachen Weihnachtsspiels mit JavaScript

Detaillierte Erklärung der MySQL-Gruppierung durch Optimierung

Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab

Artikel empfehlen

Teilen Sie 13 hervorragende Web-Wireframe-Design- und Produktionstools

So konvertieren Sie Zeilen in Spalten in MySQL

Detaillierte Erläuterung der gleichzeitigen Parameteranpassung von MySQL

jQuery implementiert einen einfachen Popup-Fenstereffekt

Detaillierte Erläuterung der Konfiguration der Yum-Quelle von Docker und deren Installation in CentOS7

Erstellen einer verteilten Selenium-Umgebung basierend auf Docker

Vue.js Leistungsoptimierung N Tipps (es lohnt sich, sie zu sammeln)

Beispiel für asynchronen Dateiupload in HTML

Lernen Sie schnell die MySQL-Grundlagen

Zusammenfassung gängiger Befehle für Ubuntu-Server

So verwenden Sie Chrome Dev Tools zur Analyse der Seitenleistung (Front-End-Leistungsoptimierung)

Analysieren von AB-Leistungstestergebnissen unter Apache

Detaillierte Erläuterung der Vorverarbeitungsmethode für WeChat-Applet-Anforderungen

Vier Methoden zur Datentypbeurteilung in JS

Eine kurze Einführung in Protobuf und ein Installationstutorial in der Ubuntu 16.04-Umgebung