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:
|
<<: Wird der veraltete Docker durch Podman ersetzt?
>>: HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag
Artikel empfehlen
Designreferenz Schönes und originelles Blog-Design
Alle unten aufgeführten Blogs sind originell und ...
Tutorial zur HTML-Tabellenauszeichnung (41): Breiten- und Höhenattribute der Tabellenüberschrift WIDTH, HEIGHT
Standardmäßig werden Breite und Höhe der Kopfzeil...
Vue+Openlayer Batch-Einstellung von Flash Point-Implementierungscode (basierend auf dem Postrender-Mechanismus)
Effektbild: Implementierungscode: <Vorlage>...
Erläuterung des MySQL-Nicht-Null-Einschränkungsfalls
Inhaltsverzeichnis Legen Sie beim Erstellen einer...
So ändern Sie das Kennwort von MySQL 5.1 und melden sich remote bei der MySQL-Datenbank an
Erstellen Sie einen MySQL-Benutzer und autorisier...
JavaScript-Methode zum Löschen oder Extrahieren bestimmter Zeichen aus einer Zeichenfolge (sehr häufig verwendet)
Inhaltsverzeichnis 1. Teilzeichenfolge () 2. subs...
Tutorial zur HTML-Tabellenauszeichnung (1): Erstellen einer Tabelle
<br />Dies ist eine Reihe von Tutorials, die...
Docker erstellt ein benutzerdefiniertes Netzwerk, um eine feste Container-IP-Adresse zu erhalten
Aufgrund des Standard-Bridge-Netzwerks ändert sic...
Tutorial zur Installation und Konfiguration der entpackten Version von MySql unter Windows 10
Installieren Sie die entpackte Version der MySql-...
Detaillierte Erläuterung des Shared-Memory-Mechanismus von Nginx
Der gemeinsam genutzte Speicher von Nginx ist ein...
So stellen Sie LNMP und phpMyAdmin in Docker bereit
Umweltvorbereitung: Stellen Sie lnmp auf einem Ho...
mysql5.7.21 UTF8-Kodierungsproblem und -Lösung in der Mac-Umgebung
1. Ziel: Ändern Sie den Wert des character_set_se...
Kostenloses Tutorial zur Installationskonfiguration der Version MySQL 5.7.18
MySQL wird in eine Installationsversion und eine ...
Vergessen Sie nicht, den HTML-Tag zu schließen
Das Erstellen von Webseiten, die Webstandards ents...
Detaillierte Erklärung des Abstandsproblems zwischen IMG-Tags
Grundlegende Analyse des IMG-Tags: In HTML5 beste...