JavaScript zum Erzielen eines elastischen Navigationseffekts

* {
      Rand: 0;
      Polsterung: 0;
        }
        
        .nav {
            Breite: 900px;
            Höhe: 63px;
            Hintergrund: URL (Bilder/doubleOne.png) keine Wiederholung rechts in der Mitte;
            Rand: 1px durchgezogen #ccc;
            Rand: 100px automatisch;
            Position: relativ;
        }
        
        ul {
            Position: relativ;
            Z-Index: 999;
        }
        
        ul>li {
            Listenstil: keiner;
            schweben: links;
            Breite: 88px;
            Höhe: 63px;
            Zeilenhöhe: 63px;
            Textausrichtung: zentriert;
        }
        
        Spanne {
            Anzeige: Inline-Block;
            Breite: 88px;
            Höhe: 63px;
            Hintergrund: URL("images/tMall.png") keine Wiederholung;
            Position: absolut;
            links: 0;
            oben: 0;
}

<div Klasse="nav">
        <ul>
            <li>Doppel-11-Karneval</li>
            <li>Veranstaltungsort für Bekleidung</li>
            <li>Digitale Haushaltsgeräte</li>
            <li>Baumaterialien für den Hausbau</li>
            <li>Mutter- und Babykleidung</li>
            <li>Mobiler Veranstaltungsort</li>
            <li>Schönheits- und Make-up-Salon</li>
            <li>Veranstaltungsort importieren</li>
            <li>Fliggy-Reisen</li>
        </ul>
        <span></span>
</div> 

//1. Das zu bearbeitende Element abrufen const oItems = document.querySelectorAll("li");
 let oSpan = document.querySelector("span");
 
//2. Warten Sie auf Klickereignisse jedes Menüs for (let i = 0; i < oItems.length; i++) {
            Füge die folgenden Elemente hinzu:
            item.onclick = Funktion() {
                //offsetLeft ruft den Offset des angeklickten Elements vom ersten positionierten Vorgängerelement ab // console.log(this.offsetLeft);
                // oSpan.style.left = this.offsetLeft + 'px';
                //Funktion easeAnimation(oSpan, { aufrufen
                    "links": dies.offsetLeft
                });
            };
        }

(Funktion() {
    /**
     * Animation mit gleichmäßiger Geschwindigkeit* @param {*} ele Element, das animiert werden soll* @param {*} obj Welche Attribute des Elements animiert werden sollen* @param {*} fn Operationen, die möglicherweise nach Abschluss der Animation ausgeführt werden müssen* 
     * Referenz der aufrufenden Methode* linearAnimation(oDiv, {
                "marginTop": 500,
                "marginLeft": 300
        });
     */
    Funktion linearAnimation(ele, obj, fn) {
        Intervall löschen(ele.timerId);
        ele.timerId = setzeIntervall(Funktion() {
            //Die Flag-Variable wird verwendet, um zu markieren, ob alle Eigenschaften die Animation abgeschlossen haben. let flag = true;
 
            für (let key in obj) {
                let Ziel = Objekt[Schlüssel];
 
                // 1. Aktuelle Position des Elements abrufen // let begin = parseInt(ele.style.width) || 0;
                let style = getComputedStyle(ele);
                // beginne = parseInt(style.width) || 0;
                lass begin = parseFloat(Stil[Schlüssel]) || 0;
 
                // 2. Definieren Sie Variablen zum Aufzeichnen der Schrittlänge: let step = (begin - target) > 0 ? -13 : 13;
 
                // 3. Berechnen Sie die neue Position begin += step;
                // console.log(Math.abs(Ziel - Beginn), Math.abs(Schritt));
                if (Math.abs(target - begin) > Math.abs(step)) { //Animation nicht abgeschlossen flag = false;
                } else { //Nach dem Ausführen der Animation begin = target;
                }
 
                // 4. Setzt die Position des Elements zurück // ele.style.width = begin + "px";
                ele.style[Schlüssel] = begin + "px";
            }
 
            //Beurteilen, ob die Animation ausgeführt wurde, wenn (Flag) {
                //Nachdem die Animation beendet ist, schalte den Timer aus clearInterval(ele.timerId);
 
                //Beurteilen Sie, ob die fn-Funktion übergeben wurde. Führen Sie sie aus, wenn sie übergeben wurde. Andernfalls führen Sie sie nicht aus. // if (fn) {
                // fn();
                // }
                fn && fn();
            }
        }, 100);
    }
 
    //Einfache Animationsfunktion easeAnimation(ele, obj, fn) {
        Intervall löschen(ele.timerId);
        ele.timerId = setzeIntervall(Funktion() {
            //Die Flag-Variable wird verwendet, um zu markieren, ob alle Eigenschaften die Animation abgeschlossen haben. let flag = true;
 
            für (let key in obj) {
                let Ziel = Objekt[Schlüssel];
 
                // 1. Aktuelle Position des Elements abrufen let style = getComputedStyle(ele);
                lass beginne = parseInt(Stil[Schlüssel]) || 0;
 
                // 2. Variable Datensatzschrittweite definieren // Formel: (Endposition - Startposition) * Beschleunigungskoeffizient (0 ~ 1)
                sei Schritt = (Ziel – Beginn) * 0,3;
 
                // 3. Berechnen Sie die neue Position begin += step;
                wenn (Math.abs(Math.floor(Schritt)) > 1) {
                    Flagge = falsch;
                } anders {
                    Beginn = Ziel;
                }
                // 4. Setzt die Position des Elements zurück ele.style[key] = begin + "px";
            }
 
            //Beurteilen, ob die Animation ausgeführt wurde, wenn (Flag) {
                //Nachdem die Animation beendet ist, schalte den Timer aus clearInterval(ele.timerId);
 
                //Beurteilen, ob die fn-Funktion übergeben wurde, und wenn ja, sie ausführen, andernfalls nicht ausführen fn && fn();
            }
        }, 100);
    }
 
    // Binden Sie die Funktion an das Fensterobjekt, damit sie global verwendet werden kann window.linearAnimation = linearAnimation;
    Fenster.easeAnimation = easeAnimation;
})();