JavaScript zum Erzielen eines Mauszieheffekts

In diesem Artikel wird der spezifische JavaScript-Code zum Erzielen des Mauszieheffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Das Effektbild ist diesmal wie folgt:

Ich denke, die Schwierigkeit bei diesem Experiment besteht darin, die relative Position der Box und der Maus unverändert zu lassen und durch Drücken und Bewegen der Maus den Zieheffekt zu erzielen.

Wie erreicht man den Drag-Effekt?

Wir müssen drei Funktionen verwenden: onmousedown , onmousemove und onmouseup , die jeweils das Drücken, Bewegen und Anheben der Maus darstellen.

In der Rückruffunktion des Mausklicks müssen wir die Anfangsposition der Maus über clientX und clientY abrufen, die Anfangsposition des Felds über offsetLeft und offsetTop abrufen und dann die Differenz zwischen der Anfangsposition der Maus und der Anfangsposition des Felds berechnen.

In der Callback-Funktion für die Mausbewegung müssen wir die aktuelle Position des Felds basierend auf der Mausposition und der zuvor berechneten Differenz ermitteln und dann die linken und oberen Werte ändern. Vergessen Sie nicht, die Position auf absolut zu setzen (weil ich es vergessen habe ...)

In der Rückruffunktion von „Maus hoch“ müssen wir die Mausbewegung und das Hochfahren der Maus löschen, indem wir onmousemove und onmouseup auf null setzen.

Achtung! ! !

Die Mausbewegungsfunktion und die Maushebefunktion sollten in die Mausdrückfunktion geschrieben werden, da wir das nachfolgende Verhalten nach dem Drücken der Maus entwerfen möchten und Folgendes sehr wichtig ist:

Die Funktion „Maus nach unten“ gehört dem Div, die Funktion „Maus bewegen“ und „Maus nach oben“ gehört dem Dokument.

Denn wir wollen nicht die Maus im div bewegen, sondern die ganze Seite

Die wichtigsten Punkte sind wahrscheinlich diese. Hier ist der Code:

<!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>
        #Kasten{
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Aquamarin;
            Rahmenradius: 14px;
            Kastenschatten: 2px 2px 6px rgba (0,0,0,.3);

            /* Hey Leute, ihr wollt euch bewegen und die linke Seite ändern, ohne die Position festzulegen. . . */
            Position: absolut;
        }
    </Stil>
</Kopf>
<Text>
    <div id="box"></div>
    <Skript>
        let box = document.getElementById("box");
        box.onmousedown=Funktion(Ereignis){
            let disx = event.clientX-box.offsetLeft;
            let disy=event.clientY-box.offsetTop;
            //Dies ist nicht box.onmousemove, sondern document.onmousemove.
            document.onmousemove=Funktion(Ereignis){
                box.style.left=event.clientX-disx+'px';
                box.style.top=event.clientY-disy+'px';
            }

            //In ommousedown zu schreiben document.onmouseup=function(){
                //Setze beide auf null
            Dokument.onmousemove=null;
            Dokument.onmouseup=null;
            gibt false zurück;
        }
        }
        
    </Skript>
</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:

Verwenden von Javascript zum Implementieren von Maus-Drag-Ereignissen
JS-Implementierung zum Verschieben von Unterfenstern durch Ziehen der Maus
js implementiert die Methode zum Wechseln von Bildern durch Ziehen der Maus
js, um Beispiel einer Mehrfachauswahlfunktion mit der Maus zu erreichen
JS-Maus-Drag-Beispielanalyse
jsMind passt die Knotenposition durch Ziehen der Maus an
js realisiert, dass die Maus zieht div nach links und rechts gleitet
Detaillierte Erklärung der JavaScript-Maus-Drag-Ereignisse
js, um Maus-Drag und Zoom-Div-Beispielcode zu erreichen
JavaScript verwendet Canvas, um die Mausziehfunktion zu implementieren

<<: So deinstallieren Sie MySQL sauber (getestet und effektiv)

>>: CSS realisiert die Layoutmethode „Fest links“ und „Adaptiv rechts“

Designideen für MySQL-Backup und -Wiederherstellung

JavaScript zum Erzielen eines Mauszieheffekts

Designideen für MySQL-Backup und -Wiederherstellung

So verwenden Sie den Fuser-Befehl im Linux-System

Detaillierte Erläuterung zur Konfiguration des Beispielcodes für den Nginx-Webserver

Vue implementiert die Bildfrequenzwiedergabe des Karussells

Eine kurze Erläuterung des MySQL-Ausführungsprozesses und der MySQL-Ausführungssequenz

Implementierung der MySQL-Datentypkonvertierung

Beispiel für eine automatische Importmethode für das Vue3.0-Routing

JavaScript implementiert Konstellationsabfragefunktion mit detailliertem Code

Nginx verwendet Reverse-Proxy, um eine Analyse des Lastausgleichsprozesses zu implementieren

Zusammenfassung der benutzerdefinierten JavaScript-Objektmethoden

Artikel empfehlen

Detaillierte Erklärung der mysql.user-Benutzertabelle in Mysql

Vue ElementUI implementiert einen asynchronen Ladebaum

Detaillierte Erklärung der atomaren DDL-Syntax von MySQL 8.0

So schreiben Sie HTML-Header in der Webentwicklung für mobile Geräte

CSS3-Implementierungscode für einfaches Karussellbildschneiden

So implementieren Sie das parallele Herunterladen großer Dateien in JavaScript

HTML+CSS zum Erstellen eines Menüs in der oberen Navigationsleiste

Codeanalyse von Benutzervariablen in MySQL-Abfrageanweisungen

Detailliertes Tutorial zur Verwendung von cmake zum Kompilieren und Installieren von MySQL unter Linux

Detailliertes Tutorial zum Erstellen einer privaten Nextcloud-Cloud-Speichernetzwerkfestplatte

js verwendet die Reduce-Methode, um Ihren Code eleganter zu gestalten

Implementierungsprozess von row_number in MySQL

Informationen zum Debuggen von CSS-Cross-Browser-Style-Fehlern

SQL zur Implementierung der Wiederherstellung einer Zeitreihenversetzung

DNS-Konfigurationsmethode für den Linux Domain Name Service