JavaScript, um das Bild mit der Maus zu bewegen

JavaScript, um das Bild mit der Maus zu bewegen

In diesem Artikel wird der spezifische JavaScript-Code zur Realisierung des Bildes nach der Mausbewegung als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Umsetzungsideen

1. Binden Sie das Mousemove-Ereignis an das Dokument und holen Sie sich die Mauskoordinaten: e.pageX, e.pageY
2. Stellen Sie das Bild auf absolute Positionierung ein: position: absolute;
3. Holen Sie sich das Bildelementobjekt und weisen Sie die x- und y-Koordinaten der Maus den linken bzw. oberen Werten des Bildes zu. Um die Maus in die Mitte des Bildes zu setzen, subtrahieren Sie die Hälfte der Breite und Höhe des Bildes, um das Bild nach oben und links zu positionieren. Hinweis: Vergessen Sie nicht, die Einheit „px“ hinzuzufügen.

Tipps:

e.clientX - - Ruft die Maus-X-Achsenkoordinate relativ zum sichtbaren Bereich des Browserfensters ab
e.clientY - - - Ruft die Y-Achsenkoordinate der Maus relativ zum sichtbaren Bereich des Browserfensters ab
e.pageX - - Ruft die Maus-X-Achsenkoordinate relativ zur Dokumentseite ab
e.pageY - - Ruft die Y-Koordinate der Maus relativ zur Dokumentseite ab
e.screenX - - Ruft die X-Achsenkoordinate der Maus relativ zum Computerbildschirm ab.
e.screenY - - Ermittelt die Y-Koordinate der Maus relativ zum Computerbildschirm

Beispiel

Codebeispiel:

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Mauskoordinaten abrufen</title>
    <Stil>
        img {
            /* Breite: 80px;
            Höhe: 90px; */
            Position: absolut;
        }
    </Stil>
</Kopf>

<Text>
    <img src="images/斑.png" alt="">
    <Skript>
        var img = document.querySelector('img');
        document.addEventListener('Mausbewegung', Funktion(e) {
            var x = e.seiteX;
            var y = e.seiteY;
            img.style.top = y - 40 + 'px';
            img.style.left = x - 48 + "px";
        })
    </Skript>
</body>

</html>

Seiteneffekt:

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-Methode zum Realisieren der Textbewegung mit der Maus
  • js-Bild folgt dem Mausbewegungscode
  • JavaScript DIV folgt der Mausbewegung
  • Verwenden Sie JS, um den Animationseffekt von Blasen zu erzielen, die der Mausbewegung folgen
  • Implementierung einer Popup-Informationsebene mit Pfeilen mittels JavaScript, die der Maus folgt, wenn diese darüber schwebt
  • js realisiert den Effekt des Bildes nach der Mausbewegung
  • JavaScript folgt den x- und y-Koordinaten der Maus, um den Texteffekt zu verschieben
  • js realisiert einen kleinen Ball, der der Mausbewegung folgt
  • js realisiert die Spezialeffekte der Bildvergrößerung und der Verfolgung der Mausbewegung

<<:  Centos erstellt ein Prozessdiagramm für den Chrony-Zeitsynchronisationsserver

>>:  Professionelle MySQL-Entwicklungsdesignspezifikationen und SQL-Schreibspezifikationen

Artikel empfehlen

Die vollständigen und inkrementellen Daten einer bestimmten MySQL-Tabelle mit der Nachrichtenwarteschlange synchronisieren - Lösung

Inhaltsverzeichnis 1. Ursprüngliche Nachfrage 2. ...

Zusammenfassung der Linux-Befehle zur Dateiverzeichnisverwaltung

Befehl „touch“ Es hat zwei Funktionen: Eine beste...

Implementierung der Docker-Container-Statuskonvertierung

Ein Zustandsübergangsdiagramm eines Docker-Contai...

8 leistungsstarke Techniken zum Erstellen von HTML-Webseiten

<br />Es gibt zwar viele Tools zum Erstellen...

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Detaillierte Erläuterung der Implementierungsmeth...

Eine kurze Einführung in den MySQL-Dialekt

Wenn wir einmal von Datenbanken absehen, was ist ...

Installation und Daemon-Konfiguration von Redis unter Windows und Linux

# Installations-Daemon-Konfiguration für Redis un...

Konfigurationslösung für die MySQL Dual-Master-Architektur (Master-Master)

In Unternehmen hat die hohe Verfügbarkeit von Dat...

Natives JS-objektorientiertes Tippspiel

In diesem Artikel wird der spezifische Code des o...

Öffnen Sie die App auf der h5-Seite in Vue (bestimmen Sie, ob es sich um Android oder Apple handelt).

1. Entwicklungsumgebung vue+vant 2. Computersyste...

Tutorial zur Installation von mysql-8.0.18-winx64 unter Windows (mit Bildern und Text)

1. Laden Sie das Installationspaket herunter Das ...

So verwenden Sie das Modul-FS-Dateisystem in Nodejs

Inhaltsverzeichnis Überblick Dateideskriptoren Sy...

js zur Realisierung der automatischen Sperrbildschirmfunktion

1. Anwendungsszenarien Es gibt eine solche Anford...

Methode und Einführung der Tabellenindexdefinition in MySQL

Überblick Ein Index ist eine vom DBMS basierend a...

Das Konzept und die Eigenschaften von benutzerdefinierten MySQL-Variablen

Ein MySQL Custom Value ist ein temporärer Contain...