JS implementiert das Ziehen des Fortschrittsbalkens, um die Transparenz von Elementen zu ändern

Was ich heute teilen möchte, ist die Verwendung von nativem JS zum Ziehen des Fortschrittsbalkens, um die Transparenz des Elements zu ändern. Der Effekt ist wie folgt:

Nachfolgend sehen Sie die Codeimplementierung. Sie können sie gerne kopieren und einfügen.

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Native JS-Fortschrittsleiste ziehen, um die Elementtransparenz zu ändern</title>
    <Stil>
        #Elternteil {
            Breite: 400px;
            Höhe: 20px;
            Hintergrund: #CCC;
            Position: relativ;
            Rand: 20px automatisch;
        }
 
        #div1 {
            Breite: 20px;
            Höhe: 20px;
            Hintergrund: rot;
            Cursor: Zeiger;
            Position: absolut;
        }
 
        #div2 {
            Breite: 300px;
            Höhe: 300px;
            Rand: 0 automatisch;
            Filter: Alpha (Deckkraft: 0);
            Deckkraft: 0;
            Hintergrund: gelb;
        }
    </Stil>
 
    <Skript>
        fenster.onload = Funktion () {
 
            var oDiv = document.getElementById('div1');
            var oParent = document.getElementById('parent');
            var oDiv2 = document.getElementById('div2');
 
            oDiv.onmousedown = Funktion (ev) {
 
                var oEvent = ev || Ereignis;
                //Berechnen Sie die Mausposition relativ zum Schieberegler var disX = oEvent.clientX - oDiv.offsetLeft;
 
                document.onmousemove = Funktion (ev) {
 
                    var oEvent = ev || Ereignis;
                    //Den dynamischen linken Wert des Schiebereglers berechnen var l = oEvent.clientX - disX;
 
                    //Begrenzung des Widerstandsbereichs if (l < 0) {
 
                        l = 0;
 
                    } sonst wenn (l > oParent.offsetWidth - oDiv.offsetWidth) {
 
                        l = oParent.OffsetWidth - oDiv.OffsetWidth;
                    }
 
                    oDiv.style.left = l + 'px';
 
                    //Berechnen Sie das Verhältnis der Ziehdistanz zum gesamten Ziehbereich var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);
 
                    //Div2 beim Ziehen der Maus schrittweise ein- und ausblenden. oDiv2.style.filter = 'alpha(opacity:' + 100 * scale + ')';
                    oDiv2.style.opacity = Skalierung;
 
                };
 
                dokument.onmouseup = Funktion () {
 
                    Dokument.onmousemove = null;
                    Dokument.onmouseup = null;
                };
            };
        };
    </Skript>
</Kopf>
 
<Text>
    <div id="übergeordnet">
        <div id="div1"></div>
    </div>
    <div id="div2"></div>
</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: