JavaScript implementiert eine Box, die der Mausbewegung folgt
|
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
Artikel empfehlen
Sequenzimplementierungsmethode basierend auf MySQL
Das Team ersetzte den neuen Rahmen. Alle neuen Un...
Installieren Sie OpenSSH unter Windows und melden Sie sich beim Linux-Server an, indem Sie einen SSH-Schlüssel generieren.
Der vollständige Name von SSH ist Secure SHell. D...
Lösung für das Vue-Datenzuweisungsproblem
Lassen Sie mich ein Problem zusammenfassen, mit d...
Der Effekt eines dynamischen CSS-Farbverlaufsrahmens, der um den Inhaltsbereich rotiert (Beispielcode)
Rendern Nachdem ich online nach relevanten Inform...
Einführung in CSS-Stileinführungsmethoden und ihre Vor- und Nachteile
Drei Möglichkeiten, CSS einzuführen 1. Inline-Sti...
Vergleichende Analyse von IN und Exists in MySQL-Anweisungen
Hintergrund Als ich kürzlich SQL-Anweisungen schr...
Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung
Vorwort Durch die Verwendung von Docker und VS Co...
Implementierungsprinzip und Nutzungsanalyse des Apache Bench-Stresstest-Tools
1: Durchsatz (Anfragen pro Sekunde) Eine quantita...
Einfache Schritte zum Schreiben benutzerdefinierter Anweisungen in Vue3.0
Vorwort Vue bietet eine Fülle integrierter Anweis...
Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen
Das Div+CSS-Layout zur Erzielung einer 2-Enden-Au...
Ein unvollständiger Leitfaden zur JavaScript-Toolchain
Inhaltsverzeichnis Überblick Statische Typprüfung...
Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte
Inhaltsverzeichnis Anwendungsszenario Ideen Proje...
WeChat-Applet implementiert Sortierfunktion basierend auf Datum und Uhrzeit
Ich habe vor kurzem ein kleines Programmierprojek...
Detaillierte Prozessanalyse der Docker-Bereitstellung des Snail-Cinema-Systems
Umwelterklärung Host-Betriebssystem: Cetnos7.9 Mi...
So zeigen Sie den Prozentsatz und die ersten paar Prozent in MySQL an
Inhaltsverzeichnis Erfordern Implementierungscode...