js, um den Effekt des Ziehens des Schiebereglers zu erzielen
|
In diesem Artikel finden Sie den spezifischen Code zum Ziehen des Schiebereglers in js als Referenz. Der spezifische Inhalt ist wie folgt Um das Ziehen des Schiebereglers zu realisieren, analysieren Sie zunächst, dass der Schieberegler gezogen werden kann, sodass die Koordinaten des Schiebereglers auf der Seite geändert werden sollten. Verwenden Sie dann die Positionierung, um die obere und linke Seite des Elements abzurufen und ihnen Werte zuzuweisen. Der nächste Schritt besteht darin, Ereignisse vorzubereiten. Da es sich um Ziehen mit der Maus handelt, sollten drei Ereignisse vorhanden sein: mousedown, mousemove und mouseup. Der Schieberegler wird durch das mousedown-Ereignis ausgewählt und durch das mousemove -Ereignis gezogen. Beim Ziehen des Schiebereglers werden die Koordinaten der Maus im sichtbaren Fenster abgerufen und der oberen und linken Seite des Schiebereglers zugewiesen. Spezifische Codeimplementierung
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
div {
Breite: 60px;
Höhe: 60px;
Hintergrundfarbe: Koralle;
Randradius: 20 %;
Position: absolut;
Rand: 6px durchgehend himmelblau;
links: 0;
oben: 0;
}
</Stil>
</Kopf>
<Text>
<div></div>
<Skript>
let div = Dokument.QuerySelector('div')
sei x, y
sei fn = Funktion (e) {
// konsole.log('hhhhhhhh')
div.style.left = e.clientX - x + 'px'
div.style.top = e.clientY - y + 'px'
wenn (e.clientX - x < 30) {
div.style.left = 0
}
wenn (e.clientY - y < 30) {
div.style.top = 0
}
wenn (e.clientX - x > document.documentElement.clientWidth - div.offsetWidth - 30) {
div.style.left = document.documentElement.clientWidth - div.offsetWidth + 'px'
}
wenn (e.clientY - y > document.documentElement.clientHeight - div.offsetHeight - 30) {
div.style.top = document.documentElement.clientHeight - div.offsetHeight + 'px'
}
}
div.addEventListener('mousedown', Funktion (e) {
x = e.OffsetX
y = e.offsetY
document.addEventListener('Mausbewegung', fn)
})
div.addEventListener('mouseup', Funktion () {
document.removeEventListener('Mausbewegung', fn)
})
</Skript>
</body>
</html>laufen
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:
|
<<: Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache
>>: Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen
Artikel empfehlen
Globale Aufrufimplementierung von Vue2.x Picker auf mobilen Endgeräten
Inhaltsverzeichnis Was ist die Picker-Komponente ...
Erste Schritte mit Front-End-Vue-Unit-Tests
Inhaltsverzeichnis 1. Warum brauchen wir Unit-Tes...
Lösung zum Importieren weiterer Daten aus MySQL in Hive
Ursprünglicher abgeleiteter Befehl: bin/sqoop imp...
Tomcat-Ausnahmelösung (Ungültiges Zeichen im Anforderungsziel gefunden. Die gültigen Zeichen sind in RFC 7230 und RFC 3986 definiert)
1. Szenariodarstellung Das Tomcat-Protokoll melde...
Detaillierte Erläuterung der Installation und Konfiguration von ROS in CLion2020.1.3 unter Ubuntu20.04
1. CLion herunterladen, installieren und aktivier...
JavaScript zum Erzielen eines Fortschrittsbalkeneffekts
In diesem Artikelbeispiel wird der spezifische Ja...
Detaillierte Erläuterung der Tomcat-Kernkomponenten und der Anwendungsarchitektur
Inhaltsverzeichnis Was ist ein Webcontainer? Die ...
Implementierung der Remote-Linux-Entwicklung mit vscode
Verabschieden Sie sich von der Vergangenheit Bevo...
Die untergeordnete Iframe-Seite betreibt die übergeordnete Seite und implementiert den Effekt der Abschirmung der Seiten-Popup-Ebene
Frage: In index.html führt iframe son.html ein. Wi...
Zwei Möglichkeiten zur Visualisierung von ClickHouse-Daten mit Apache Superset
Apache Superset ist ein leistungsstarkes BI-Tool,...
Gängige Master-Slave-Replikationsarchitekturen in MySQL 4
Inhaltsverzeichnis Replikationsarchitektur mit ei...
Wie besteht man die W3C-Validierung?
Neben der Festlegung von Vorschriften für verschi...
So konfigurieren Sie inländische Quellen in CentOS8 yum/dnf
CentOS 8 hat das Installationsprogramm für Softwa...
Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen
1. Übersicht Gruppieren nach bedeutet, Daten nach...
Diagramm zum Implementierungsprozess der Linux-Jenkins-Konfigurations-Salve-Knoten
Vorwort: Die verteilte Master-Slave-Architektur v...