Natives JS zum Implementieren der Seitenleiste zum Teilen

Dieser Artikel zeigt eine mit nativem JS implementierte Sharing-Seitenleiste. Der Effekt ist wie folgt:

Nachfolgend finden Sie die Codeimplementierung, die Sie bequem kopieren und einfügen können.

<!DOCTYPE html>
<html>
 
<head lang="de">
    <meta charset="UTF-8">
    <title>Mit Wirkung teilen</title>
    <Stil>
        #Aktie {
            Position: fest;
            Breite: 100px;
            Höhe: 200px;
            Hintergrundfarbe: hellblau;
            links: -100px;
            oben: 100px;
        }
 
        #Spanne teilen {
            Breite: 20px;
            Höhe: 60px;
            Zeilenhöhe: 20px;
            Textausrichtung: zentriert;
            links: 100px;
            oben: 70px;
            Position: absolut;
            Hintergrundfarbe: gelb;
        }
    </Stil>
 
</Kopf>
 
<Text>
 
    <div id="teilen">
        <span>Teilen mit</span>
    </div>
 
    <Skript>
        //Element abrufen var share = document.getElementById("share");
        // Legen Sie das zu teilende Ereignis fest
        teilen.onmouseover = Funktion () {
            animieren(dies, "links", 0);
        };
        teilen.onmouseout = Funktion () {
            animieren(dies, "links", -100);
        };
 
        // Bewegungsfunktion animieren function animate(tag, attr, target) {
            clearInterval(tag.timer);
            tag.timer = setzeIntervall(Funktion () {
 
                // Den aktuellen Status eines Attributs abrufen // Da es Einheiten hat, muss es gerundet werden // parseInt("hehe") => NaN NaN || 0
                // Um das Problem der automatischen Konvertierung in NaN zu lösen, verwenden wir eine Kurzschlussoperation, um die Robustheit des Programms sicherzustellen var leader = parseInt(getStyle(tag, attr)) || 0;
 
                // Ein Teil der Easing-Formel ist die Änderung des Schrittwerts var step = (Ziel – Leader) / 10;
 
                // Da offsetLeft beim Erfassen der Werte gerundet wird, führt ein relativ kleiner Schritt zu Problemen bei der Bewegung. // Ändern Sie die Rundungsmethode entsprechend der positiven oder negativen Schrittzahl. step = step > 0 ? Math.ceil(step) : Math.floor(step);
 
                // Easing-Formel Leader = Leader + Schritt;
 
                // Auf ein bestimmtes Attribut setzen tag.style[attr] = leader + "px";
 
                //Überprüfen Sie, ob Sie die angegebene Position erreicht haben, if (leader == target) {
                    clearInterval(tag.timer);
                }
            }, 17);
        }
 
        // Wird verwendet, um den Stilattributwert eines Tags abzurufen // mit der Unit-Funktion getStyle(tag, attr) {
            // Prüfen Sie, welches unterstützt wird // box.currentStyle, wenn es nicht existiert, ist der Wert undefiniert
            // getComputedStyle, wenn der Browser es nicht unterstützt. Dies ist gleichbedeutend damit, dass eine Variable nicht deklariert wird und ein Fehler gemeldet wird, wenn (tag.currentStyle) {
                // dh unterstützt return tag.currentStyle[attr];
            } anders {
                // Standardmethode return getComputedStyle(tag, null)[attr];
            }
        }
 
    </Skript>
</body>
 
</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:

Implementieren Sie nahtloses Scrollen in JavaScript und geben Sie den Beispielcode für die Seitenleiste frei.
Beispiel für eine Sidebar-Animation im JS Motion Framework
So implementieren Sie den festen Effekt des Blog-Seitenleistenmoduls, das mit der Bildlaufleiste gleitet (js+jquery usw.)
JavaScript zum Implementieren von dynamischem Sidebar-Code
JavaScript zum Erreichen eines einfachen Beispiels einer versteckten Seitenleistenfunktion
Detaillierte Erklärung der Javascript-Implementierung eines dynamischen Seitenleistenbeispiels
Verwenden von js zum Schreiben einer responsiven Seitenleiste
JS implementiert die Seitenleisten-Maus über Popup-Box + Puffereffekt
Implementierung mobiler Sidebar-Schiebeeffekte basierend auf slideout.js
js+css, um eine Seitenleiste im Vollbildmodus zu erreichen

<<: Warum MySQL das Löschen von Daten nicht empfiehlt

>>: Tutorial zu HTML-Tabellen-Tags (31): Breiten- und Höhenattribute für Zellen WIDTH, HEIGHT