JavaScript implementiert eine Box, die der Mausbewegung folgt

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:
  • So verwenden Sie Javascript, um den Effekt eines Bildes zu erzielen, das der Mausbewegung folgt
  • js+html+css zur Realisierung eines Div-Beispiels mit Mausbewegungen
  • js-Methode zum Realisieren der Textbewegung mit der Maus
  • js-Bild folgt dem Mausbewegungscode
  • JavaScript DIV folgt der Mausbewegung
  • js realisiert den Effekt des Bildes nach der Mausbewegung
  • js realisiert einen kleinen Ball, der der Mausbewegung folgt
  • js realisiert die Spezialeffekte der Bildvergrößerung und der Verfolgung der Mausbewegung
  • Beispiel für mehrere farbige Bälle, die der Mausbewegung folgen, Animationseffekt, implementiert durch natives JS
  • Javascript-Maus bewegt sich nach oben und der Schieberegler folgt dem Effekt-Code-Sharing

<<:  Was tun, wenn Sie Ihr MySQL-Passwort vergessen?

>>:  So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

Artikel empfehlen

Prinzipien und Beispiele für Lambda-Ausdrücke

Lambda-Ausdrücke Lambda-Ausdrücke, auch Closures ...

SQL-Übung: Produktkategorie-Datenoperation in der Online-Shopping-Datenbank

Datenbank für Online-Einkaufszentren - Produktkat...

So gestalten Sie Ihre JavaScript-Funktionen eleganter

Inhaltsverzeichnis Objektparameter durch Destrukt...

Manuelle Implementierung der Instanceof-Methode in JavaScript

1. Verwendung von instanceof Mit instanceof wird ...

Lösen Sie das Matching-Problem in CSS

Problembeschreibung Wie wir alle wissen, wird bei...

Textmodus im IE! Einführung in die Rolle von DOCTYPE

Nachdem das im vorherigen Artikel besprochene Prob...

Was macht die MySQL-Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Einführung in HTML für Frontend-Entwickler

1 Einführung in HTML 1.1 Erste Erfahrungen mit Co...

So steuern Sie die Startreihenfolge von Docker Compose-Diensten

Zusammenfassung Docker-Compose kann problemlos me...

Implementierungsmethode der rekursiven MySQL-Baumabfrage

Vorwort Bei baumstrukturierten Daten in der Daten...

Detaillierte Erklärung zur Verwendung des MySQL-Sicherungsskripts mysqldump

In diesem Artikel wird das MySQL-Sicherungsskript...

Allgemeine Symbole in Unicode

Unicode ist ein von einer internationalen Organis...

CSS Acht auffällige HOVER-Effekt-Beispielcodes

1. Effekt-HTML senden <div id="senden-btn...