JavaScript zum Erzielen von Spezialeffekten beim Treppenrollen (jQuery-Implementierung)

Ich glaube, jeder hat JD verwendet. Auf der Homepage gibt es ein sehr häufiges Feature: den Treppen-Spezialeffekt .

Für uns Programmierer: Alles kann auf Disk gespeichert werden. Schauen wir es uns also einmal an.

Schauen wir uns zunächst das zu erzielende Wirkungsdiagramm an:

Beschreibung der Effektfunktion: Wenn Sie auf die schwebende Schaltfläche rechts klicken, klicken Sie auf das entsprechende Modul und der Inhaltsbereich links springt automatisch zum Modulbereich.

Unten der 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;
        }
        li{
            Listenstiltyp: keiner;
        }
        .Spitze{
            Höhe: 900px;
            Hintergrund: #ddd;
        }
        .Fußzeile{
            Höhe: 600px;
            Hintergrund: #ddd;
        }
        .Inhalt{
            Höhe: 800px;
        }
        .Inhalt h1{
            Textausrichtung: zentriert;
            Zeilenhöhe: 80px;
        }
        .Treppenliste{
            Breite: 60px;
            Position: fest;
            rechts: 5 %;
            oben: 50 %;
            Rand oben: -120px;
            Hintergrund: #fff;
        }
        .stairs-list li{
            Breite: 50px;
            Höhe: 50px;
            Zeilenhöhe: 25px;
            Textausrichtung: zentriert;
            Polsterung: 5px;
            Rahmen unten: 1px durchgezogen #ddd;
        }
        .stairs-list li.active{
            Farbe: orangerot;
        }
        .treppe li span {
            Anzeige: Block;
 
        }
 
    </Stil>
</Kopf>
<Text>
    <div Klasse="oben">
    </div>
    <div Klasse="Inhalt" Stil="Hintergrundfarbe: gelbgrün">
        <h1>Jingdong-Schnellverkauf</h1>
    </div>
    <div Klasse="Inhalt" Stil="Hintergrundfarbe: Himmelblau">
        <h1>Ausgewählte Auswahl</h1>
    </div>
    <div Klasse="Inhalt" Stil="Hintergrundfarbe: #666">
        <h1>Kanal Plaza</h1>
    </div>
    <div Klasse="Inhalt" Stil="Hintergrundfarbe: orangerot">
        <h1>Für Sie empfohlen</h1>
    </div>
    <div Klasse="Fußzeile"></div>
 
    <ul Klasse="Treppenliste">
        <li>
            <span>JD.com</span>
            <span>Zweiter Kill</span>
        </li>
        <li>
            Merkmale
            <span>Bevorzugt</span>
        </li>
        <li>
            <span>Kanal</span>
            <span>Quadrat</span>
        </li>
         <li>
            <span>Für Sie</span>
            <span>Empfehlungen</span>
        </li>
    </ul>
 
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <Skript>
        // OOA:
 
        // 1. Daten initialisieren;
        // 2. Ereignisbindung;
        // 3. Bestimmen Sie den Boden basierend auf dem ScrollTop-Wert.
        // 4. Effekt hinzufügen;
        // 5. Index entsprechend dem Klickereignis wechseln;
 
 
        Funktion Treppe(Optionen){
            this.options = Optionen;
            dies.init();
        }
        Treppen.Prototyp = {
            Konstrukteur: Treppen,
            init: Funktion(){
                // Inhaltselementhöhe Array;
                dies.content_ele_offset_top_list = [];
                // Die Offsethöhe des Elements abrufen;
                $(this.options.content_selector).offset( Funktion( Index , Koordinaten) {
                    // Trage den Höhenwert jedes Elements in die Höhenliste ein;
                    this.content_ele_offset_top_list.push(Koordinaten.oben);
                    Rückgabekoordinaten;
                }.binden(dies))
                // Den Mindesthöhenwert abrufen;
                var _length = this.content_ele_offset_top_list.length; 
                dies.min_top = dies.content_ele_offset_top_list[0];
                this.max_top = this.content_ele_offset_top_list[_length - 1] + $(this.options.content_selector).last().height();
                dies.content_ele_offset_top_list.push(dieses.max_top);
 
                this.bindEvent();
            },
            bindEvent:Funktion(){
                var $body_html = $("body,html");
                //Speichere den Zeiger des Instanzobjekts;
                // var _this = dies;
                var Instanz = diese;
                // Hochfrequente Scroll-Ereignisse;
                // Optimierung: Drosselung;
                $(Dokument).scroll( Funktion(){
                    var scrollTop = $body_html.scrollTop();
                    this.calStairsIndex(scrollTop);
                }.binden(dies))
                
                $(this.options.stairs_selector).klick(function(){
                    // Wissen, bei welchem Element das Ereignis gerade auftritt; dies; Da dieser jQuery-Ereignisbindungsprozess keine Möglichkeit hat, das Element, bei dem das Ereignis gerade auftritt, extern zu übergeben; dies kann nicht geändert werden;
                    //Wer ist das aktuelle Instanzobjekt; dies;
                    var index = $(this).index(instance.options.stairs_selector);
                    Instanz.changeScrollTop(index);
                })
            },
            // Aktuelle Etage berechnen;
            calStairsIndex : Funktion( st ){
                // Treppenhausbereich zur Absperrung nicht erreicht;
                wenn(st < dies.min_top || st > dies.max_top){ 
                    // konsole.log(-1);
                    dieser.index = -1;
                    dies.changeStairsBtn();
                    return false 
                };
                // Wenn es noch im Bereich liegt, ist keine weitere Beurteilung erforderlich.
                var _list = diese.content_ele_offset_top_list;
                // Wenn „st“ noch innerhalb des aktuellen Indexbereichs liegt, nicht weiter suchen;
                wenn(st >= _list[this.index] && st < _list[this.index + 1]){
                    gibt false zurück;
                }
                // Durchqueren;
                für(var i = 0 ; i < _list.length ; i++){
                    wenn(st >= _list[i] && st < _list[i + 1]){
                        dies.index = i;
                        brechen;
                    }
                }
                dies.changeStairsBtn();
            },
            ändereStairsBtn : Funktion(){
                wenn(dieser.index === -1){
                    $(this.options.stairs_selector).removeClass("aktiv");
                    gibt false zurück;
                }
                $(this.options.stairs_selector).eq(this.index).addClass("aktiv")
                .geschwister()
                .removeClass("aktiv");
            },
            changeScrollTop : Funktion( Index ){
                $("body,html").scrollTop(diese.content_ele_offset_top_list[index]);
                // Ereignisauslöser;
                $(document).trigger("scrollen");
            }
        }
 
        var staris = neue Treppe({
            Inhaltsselektor: ".Inhalt",
            Treppenselektor: ".stairs-list li"
        });
        Konsole.log(staris);
 
     
    </Skript>
</body>
</html>

Jetzt können wir denselben funktionalen Effekt erzielen.

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: