In diesem Artikel wird der spezifische JavaScript-Code zur Verfolgung der Mausbewegung als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt Eine Box, die der Maus folgt (inkl. Grenzwerterkennung) Effektbild: Code: <!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0"> <title>Dokument</title> </Kopf> <Stil> div { Position: absolut; oben: 0px; links: 0px; Breite: 100px; Höhe: 100px; Hintergrundfarbe: rot; } </Stil> <Text> <div>111111111</div> <Skript> var div = document.getElementsByTagName('div')[0]; div.onmousedown = Funktion(e) { e = Fenster.Ereignis || e; // Drücken Sie die Maus, um den Abstand von der Maus zur linken Seite der Seite zu erhalten. var x = e.clientX; // Abstand zwischen der Maus und dem oberen Seitenrand ermitteln var y = e.clientY; // Der Abstand zwischen dem Element und der linken Seite der Seite var elex = div.offsetLeft; // Der Abstand zwischen dem Element und der Oberseite der Seite var eley = div.offsetTop; // Subtrahieren, um die Distanz zwischen der Maus und dem Element zu erhalten var X = x - elex; var Y = y - eley; konsole.log(X, Y); Dokument.onmousemove = Funktion(e) { e = Fenster.Ereignis || e; // Abstand zwischen Maus und Seite während der Mausbewegung ermitteln var movex = e.clientX; var movey = e.clientY; // 1. Linker Grenzwert // Der Abstand von der linken Seite während der Elementbewegung var leftx = movex - X; var lefty = movey - Y; // 1. Linker Grenzwertwenn (leftx <= 0) { linksx = 0; } // 2. Oberer Grenzwertwenn (lefty <= 0) { Linkshänder = 0 } // 3. Rechter Randwert // Breite des sichtbaren Seitenbereichs - Elementbreite var rightx = document.documentElement.clientWidth - div.offsetWidth; wenn (linksx >= rechtsx) { linksx = rechtsx } // 4. Unterer Seitengrenzwert // Höhe des sichtbaren Seitenbereichs - Elementhöhe var righty = document.documentElement.clientHeight - div.offsetHeight; wenn (links >= rechts) { Linkshänder = Rechtshänder; } //Ermitteln Sie den Abstand zwischen der Maus und der Seite während der Mausbewegung – der Abstand zwischen der Maus und dem Element = der linke obere Wert des Elements div.style.left = leftx + 'px'; div.style.top = lefty + "px"; } //Hochheben, um das mobile Ereignis zu löschen document.onmouseup = function() { Dokument.onmousemove = null; } // Standardereignis verhindern return false; } </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:
|
<<: Was tun, wenn Sie Ihr MySQL-Passwort vergessen?
>>: So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus
Lambda-Ausdrücke Lambda-Ausdrücke, auch Closures ...
Datenbank für Online-Einkaufszentren - Produktkat...
Inhaltsverzeichnis Objektparameter durch Destrukt...
1. Verwendung von instanceof Mit instanceof wird ...
Problembeschreibung Wie wir alle wissen, wird bei...
Nachdem das im vorherigen Artikel besprochene Prob...
MySQL ist ein relationales Datenbankverwaltungssy...
1 Einführung in HTML 1.1 Erste Erfahrungen mit Co...
Zusammenfassung Docker-Compose kann problemlos me...
Vorwort Bei baumstrukturierten Daten in der Daten...
Das Unternehmen hatte einen gut konfigurierten Se...
In diesem Artikel wird das MySQL-Sicherungsskript...
Unicode ist ein von einer internationalen Organis...
1. Effekt-HTML senden <div id="senden-btn...
Heute bin ich auf das MySQL-Dienstfehlerproblem 1...