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