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

Lösung für die Auswirkungen leerer Pfade auf die Seitenleistung

Vor ein paar Tagen habe ich einen von Yu Bo getei...

Detaillierte Erläuterung der MySQL-Remoteverbindungsberechtigung

1. Melden Sie sich bei der MySQL-Datenbank an mys...

Detaillierte Erläuterung der MySQL-Existes- und Not-Existes-Beispiele

Detaillierte Erläuterung der MySQL-Existes- und N...

Docker-Compose-Installation DB2-Datenbankbetrieb

Es ist mühsam, die db2-Datenbank direkt auf dem H...

Webdesign-Kenntnisse: Hohe Rankingprobleme bei gemischten chinesischen und englischen Webseiten

<br />Ich werde mit diesem Problem im Grunde...

Tutorial-Diagramm zur Installation des MySQL-Dienstes über MySQL Installer unter Windows

MYSQL bietet offiziell eine Installer-Methode zum...

Beheben Sie das Problem, dass das vom Docker bereitgestellte Verzeichnis nicht gelesen und geschrieben werden kann

Verwenden Sie den folgenden Befehl, um einen Cont...

Das neueste grafische Tutorial zur Installation und Konfiguration von MySQL 5.7.23

Die detaillierte Installation und Konfiguration d...

Lösung für das Problem des Informationsverlusts mit "_" im Header bei Verwendung des Nginx-Proxys

Vorwort Bei der Entwicklung eines Gateway-Projekt...

Lösen Sie das Problem des Yum-Installationsfehlers Geschützte Multilib-Versionen

Wenn ich heute nginx auf dem Cloud-Server install...

So verwenden Sie den SS-Befehl anstelle von Netstat im Linux-Betrieb und bei der Wartung

Vorwort Beim Betrieb und der Verwaltung von Linux...

Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen

Um es gleich auf den Punkt zu bringen: Bei manche...

Umfassender Vergleich und Bewertung des Vue-Code-Hervorhebungs-Plugins

Inhaltsverzeichnis Umfassender Vergleich Aus der ...

JS realisiert Spezialeffekte der Webseiten-Navigationsleiste

In diesem Artikel erfahren Sie mehr über einen pr...

Detaillierte Schritte zur Installation von Docker mongoDB 4.2.1 und zum Sammeln von Springboot-Protokollen

1: Installieren Sie MongoDB im Docker Schritt 1: ...