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
CSS3 realisiert den Animationseffekt der Lotusblüte
Schauen wir uns zunächst die Wirkung an: Dieser E...
Diskussion über die Möglichkeit zum Öffnen von Website-Hyperlinks
Ein neues Fenster wird geöffnet. Vorteile: Wenn d...
Lösung für das Problem der unvollständigen Anzeige des Inhalts der ausgewählten Dropdown-Box in HTML und der teilweisen Abdeckung
Heute ist mir ein Problem aufgefallen: Der Inhalt ...
So fügen Sie Nginx dynamisch Module hinzu
Vorne geschrieben Nachdem wir Nginx basierend auf...
Lösung zum Verbergen der Versionsnummer und der Webserverinformationen von Nginx
Nginx kann nicht nur Versionsinformationen verber...
Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte
In diesem Artikelbeispiel wird der spezifische Im...
Verstehen Sie kurz die beiden gängigen Methoden zum Erstellen von Dateien im Linux-Terminal
Wir alle wissen, dass wir den Befehl mkdir verwen...
Docker-Overlay realisiert die Container-Kommunikation zwischen Hosts
Inhaltsverzeichnis 1. Docker-Konfiguration 2. Ers...
Detaillierte Erläuterung der Idee des MySQL-Triggers zur Echtzeiterkennung einer Anweisung zum Sichern und Löschen
Problembeschreibung: Der Benutzer hat die Anforde...
Beschreibung der Schreibmethode des Foreach-Arrays in Vue und des Traversal-Arrays in js
So schreiben Sie ein Vue-foreach-Array und durchl...
Eine kurze Einführung in MySQL InnoDB ReplicaSet
Inhaltsverzeichnis 01 Einführung in InnoDB Replic...
Verwenden von react-virtualized zum Implementieren einer langen Liste von Bildern mit dynamischer Höhe
Inhaltsverzeichnis Während der Entwicklung aufget...
Analysieren Sie das Problem der Übertragung von Dateien und anderen Parametern in der Upload-Komponente von Element-UI
Vor kurzem habe ich in meinem Projekt vuethink ve...
Vue echarts realisiert horizontales Balkendiagramm
In diesem Artikel wird der spezifische Code von V...
Methodenbeispiel zum sicheren Abrufen tiefer Objekte von Object in Js
Inhaltsverzeichnis Vorwort Text Parameter Beispie...