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:

JavaScript implementiert die Drag-Slider-Puzzle-Verifizierungsfunktion (html5, Canvas)
js ziehen Sie den Schieberegler und klicken Sie auf den Wasserwelleneffekt Beispielcode
Vue implementiert die Drag-Slider-Verifizierungsfunktion (nur CSS+JS ohne Hintergrundverifizierungsschritte)
Implementierung des Drag-Slider-Effekts basierend auf JavaScript
Implementierung der Drag-Slider-Verifizierungsfunktion basierend auf JS-Komponenten (Code-Sharing)
js-Methode zur Steuerung der Bildgröße durch Ziehen des Schiebereglers
Codebeispiel für die Implementierung eines Drag-Verifizierungs-Schiebereglers mit nativer JS-Kapselung
js realisiert den digitalen Slider-Drag-Selection-Effekt, der mit PCs und mobilen Endgeräten kompatibel ist
JS reagiert auf Mausklicks, um den Drag-Effekt zwischen zwei Schiebereglern zu erzielen

<<: Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache

>>: Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen

So verwenden Sie Javascript zum Erstellen einfacher Algorithmen

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

Gespeicherte Funktionen Was ist eine gespeicherte...

js, um den Effekt des Ziehens des Schiebereglers zu erzielen

So verwenden Sie Javascript zum Erstellen einfacher Algorithmen

Webseitenerstellung für Anfänger: Lernen Sie den Umgang mit dem A-Tag für HTML-Hyperlinks

Beispiel zum Aktivieren langsamer Abfragen in MySQL

Schreiben Sie eine dynamische Uhr auf einer Webseite in HTML

Probleme mit der NodeJS-, Koa- und Typescript-Integration und dem automatischen Neustart

Detaillierte Erläuterung der zugrunde liegenden Implementierung des absteigenden Index, einer neuen Funktion von MySQL 8

Methode zur Implementierung von Leistungstests der MySQL-Datenbank durch das Sysbench-Tool

Vue + elementui realisiert Mehrfachauswahl- und Suchfunktionen der Dropdown-Tabelle

Drei Implementierungsmethoden für die MySQL-Kopiertabelle und die Grant-Analyse

Designtheorie: Die Grundlagen der Schriftgestaltung

Artikel empfehlen

MySql-Wissenspunkte: Transaktion, Index, Sperrprinzip und Nutzungsanalyse

So verwenden Sie vite zum Erstellen einer Vue3-Anwendung

So betreten und verlassen Sie den Docker-Container

Eine kurze Diskussion darüber, wie man JS Schritt für Schritt lernt

Webdesign-Tutorial (4): Über Materialien und Ausdrücke

Die Kombination und der Unterschied zwischen ENTRYPOINT und CMD im Dockerfile

Detaillierte Schritte zur Installation von MinIO auf Docker

JS erhält Fünf-Sterne-Lob

Detaillierte Erläuterung der Definition und Verwendung von in MySQL gespeicherten Funktionen (benutzerdefinierten Funktionen)

Detaillierte Erklärung der Verwendung und Erfahrung mit tinyMCE

202 kostenlose, hochwertige XHTML-Vorlagen (1)

Linux-Debugging-Tools, die sich Entwickler und Betreiber unbedingt ansehen sollten [Empfohlen]

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

So zeigen Sie historische Befehle in Linux an und führen sie aus

Prinzip der MySQL-Paging-Analyse und Effizienzverbesserung