JS realisiert den Effekt der Baidu News-Navigationsleiste

<div Klasse="Box">
        <!--Zwei rote Hintergrundblöcke-->
        <!--Hintergrundblock, der sich mit der Maus bewegt-->
        <div id="verschieben"></div>
        <!--Der Hintergrundblock wird nach den Mausklicks irgendwo fixiert-->
        <div id="fest"></div>
        <a href="#">Startseite</a>
        <a href="#">Inland</a>
        <a href="#">Internationales</a>
        Militär
        <a href="#">Finanzen</a>
        <a href="#">Unterhaltung</a>
        <a href="#">Sport</a>
        <a href="#">Internet</a>
        <a href="#">Technologie</a>
        <a href="#">Spiele</a>
        <a href="#">Frau</a>
        <a href="#">Auto</a>
        <a href="#">Eigenschaft</a>
</div>

 *{
            Rand: 0;
            Polsterung: 0;
        }
        .Kasten{
            oben: 100px;
            Breite: 790px;
            Höhe: 30px;
            Schriftgröße: 0;
            Position: relativ;
            Rand: 0 automatisch;
            Hintergrundfarbe: #01204f;
        }
        A{
            Anzeige: Inline-Block;
            Position: relativ;
            Breite: 60px;
            Höhe: 30px;
            Zeilenhöhe: 30px;
            Farbe: weiß;
            Schriftgröße: 16px;
            Textdekoration: keine;
            Textausrichtung: zentriert;
            Übergang: alle 0,6 s;
        }
        #bewegen{
            Position: absolut;
            Hintergrundfarbe: rot;
            oben: 0px;
            links: 0px;
            Breite: 60px;
            Höhe: 30px;
            Übergang: alle 0,6 s;
        }
        #behoben{
            Position: absolut;
            Hintergrundfarbe: rot;
            oben: 0px;
            links: 0px;
            Breite: 60px;
            Höhe: 30px;
        }

fenster.onload = Funktion () {
      let move = document.getElementById("move");//Gleitender Hintergrundblock let fixed = document.getElementById("fixed");//Hintergrundblock irgendwo fixiert let aList = document.getElementsByTagName("a");//eine Tag-Liste let left = move.offsetLeft + "px";//Anfangsposition des gleitenden Hintergrundblocks //Bindet alle a-Tags an die Ereignisse Hineinbewegen, Herausbewegen und Klicken für (let i = 0; i < aList.length; i++) {
                eineListe[i].onmouseover = Funktion () {
                    // Wenn die Maus auf ein bestimmtes a-Tag bewegt wird, gleitet der gleitende Hintergrundblock an die Position des aktuellen a-Tags move.style.left = aList[i].offsetLeft + "px";
                }
                eineListe[i].onmouseout = Funktion () {
                    // Wenn die Maus aus dem Etikett „a“ herausbewegt wird, kehrt der gleitende Hintergrundblock in die Ausgangsposition zurück.move.style.left = left;
                }
                eineListe[i].onclick = Funktion () {
                    // Nachdem auf ein bestimmtes a-Tag geklickt wurde, bewegt sich der feste Hintergrundblock an die Position des aktuellen a-Tags fixed.style.left = aList[i].offsetLeft + "px";
                    // Aktualisiere die Anfangsposition des gleitenden Hintergrundblocks auf die aktuelle Position des Labels a left = aList[i].offsetLeft + "px";
                }
            }
        }