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

So wählen und verwenden Sie PNG, JPG und GIF als Web-Bildformate

Welches dieser Formate (GIF, PNG oder JPG) sollte...

JavaScript zur Implementierung der Schaltfläche „Zurück nach oben“

In diesem Artikel wird der spezifische Code für J...

Detaillierte Erklärung des Overflow-Scrollens zur Lösung des Scroll-Lag-Problems

Vorwort Wenn Sie das Attribut „overflow: scroll“ ...

Aktivierungsmethode für Windows Service 2016 Datacenter\Stand\Embedded (2021)

Führen Sie cmd mit Administratorrechten aus slmgr...

Detaillierte Erläuterung der CSS-Randüberlappung und Lösungssuche

Ich habe kürzlich einige CSS-bezogene Wissenspunk...

Praktische Lösung für die Bereitstellung von Prometheus-Containern

Umfeld Hostname IP-Adresse Aufschlag Prometheus 1...

js zur Implementierung der Kollisionserkennung

In diesem Artikelbeispiel wird der spezifische Co...

Tutorial zur Verwendung des Hyperlink-Tags in HTML

Die verschiedenen HTML-Dokumente der Website sind...

MySql-Wissenspunkte: Transaktion, Index, Sperrprinzip und Nutzungsanalyse

Dieser Artikel erläutert anhand von Beispielen di...

Bei der anonymen Mysql-Anmeldung kann keine Datenbankproblemlösung erstellt werden

Häufig gestellte Fragen Der Zugriff für den Benut...

JavaScript-Selektorfunktionen querySelector und querySelectorAll

Inhaltsverzeichnis 1. querySelector fragt ein ein...

So schreiben Sie den Einführungsinhalt der Infoseite der Website

Alle Websites, ob offiziell, E-Commerce, soziale ...