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

Bildschirmbefehl und Verwendung unter Linux

js, um den Effekt des Ziehens des Schiebereglers zu erzielen

Bildschirmbefehl und Verwendung unter Linux

So deinstallieren Sie MySQL sauber (getestet und effektiv)

Begrenzung der Anzahl kurzfristiger Zugriffe auf eine bestimmte IP basierend auf Nginx

Was Sie über die automatische ID-Inkrementierung in MySQL wissen müssen

Parsen von Apache Avro-Daten in einem Artikel

Vue implementiert die Abfrage von Startzeit und Endzeitbereich

Schreiben Sie ein Publish-Subscribe-Modell mit JS

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

So verwenden Sie das Docker-Plugin, um Projekte remote auf Cloud-Servern in IDEA bereitzustellen

Zusammenfassung häufig verwendeter Tags in HTML (unbedingt lesen)

Artikel empfehlen

Über die MariaDB-Datenbank unter Linux

Detaillierte Erklärung der Desktop-Anwendung mit Vue3 und Electron

Erläuterung der Methode zum Schreiben von SQL-Anweisungen zum Einfügen

Detaillierte Erläuterung der allgemeinen Schritte zur SQL-Anweisungsoptimierung

Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung

Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.18.zip (Windows 64 Bit)

Installationsschritte für das grafische MySQL-Verwaltungstool Navicat

Eingebettetes Transplantations-Docker-Fehlerproblem (Zusammenfassung)

Einfache Installation des vi-Befehls im Docker-Container

Docker-Image erstellen Dockerfile und Commit-Operationen

Detaillierte Erläuterung der bidirektionalen Bindung von Vue

calc(), um einen Vollbild-Hintergrundinhalt mit fester Breite zu erreichen

Detaillierte Erläuterung der globalen Parameterpersistenz in den neuen Funktionen von MySQL 8

Mehrere gängige Möglichkeiten zum Bereitstellen von Tomcat-Projekten [getestet]

MySQL und MySQL Workbench Installations-Tutorial unter Ubuntu