JavaScript to make the picture move with the mouse

This article shares the specific code of JavaScript to realize the picture following the mouse movement for your reference. The specific content is as follows

Implementation ideas

1. Bind the mousemove event to the document and get the mouse coordinates: e.pageX, e.pageY
2. Set the image to absolute positioning: position: absolute;
3. Get the image element object, assign the mouse's x and y coordinates to the image's left and top values respectively. To put the mouse in the middle of the image, subtract half of the image's width and height to position the image upward and to the left. Note: do not forget to add the unit 'px'

Tips:

e.clientX - - Gets the mouse x-axis coordinate, relative to the browser window visible area
e.clientY - - - Gets the Y-axis coordinate of the mouse, relative to the browser window's visible area
e.pageX - - Gets the mouse x-axis coordinate, relative to the document page
e.pageY - - Gets the Y coordinate of the mouse, relative to the document page
e.screenX - - Get the mouse x-axis coordinate, relative to the computer screen
e.screenY - - Get the Y coordinate of the mouse, relative to the computer screen

Example

Code example:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get mouse coordinates</title>
    <style>
        img {
            /* width: 80px;
            height: 90px; */
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="images/斑.png" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.top = y - 40 + 'px';
            img.style.left = x - 48 + 'px';
        })
    </script>
</body>

</html>

Page effect:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

How to use javascript to achieve the effect of image following mouse movement
js method to realize the text moving with the mouse
js picture follows the mouse movement code
JavaScript DIV follows the mouse movement
Use JS to achieve the animation effect of bubbles following the mouse movement
Using JavaScript to implement a pop-up information layer with arrows that follows the mouse when the mouse is hovering
js realizes the effect of picture following mouse movement
JavaScript follows the x and y coordinates of the mouse to move the text effect
js realizes a small ball that follows the mouse movement
js realizes the special effects of image enlargement and following the mouse movement

<<: Centos builds chrony time synchronization server process diagram

>>: Professional MySQL development design specifications and SQL writing specifications

Common rule priority issues of Nginx location

JavaScript to make the picture move with the mouse

Implementation ideas

Tips:

Example

Common rule priority issues of Nginx location

What are the differences between var let const in JavaScript

A magical MySQL deadlock troubleshooting record

Implementing simple tabs with js

CSS3 realizes the glowing border effect

Analysis of examples of using anti-shake and throttling in Vue components

MySQL 5.7 decompressed version installation, uninstallation and garbled code problem graphic solution

Example of using CSS to achieve semi-transparent background and opaque text

The reason why MySQL uses B+ tree as its underlying data structure

How to reset the root password in Linux mysql-5.6

Recommend

Detailed explanation of WordPress multi-site configuration under Nginx environment

Use of provide and inject in Vue3

How to encapsulate axios in Vue

Introduction to basic concepts and technologies used in Web development

Use PHP's mail() function to send emails

Using vue3 to imitate the side message prompt effect of Apple system

JavaScript implements draggable progress bar

Methods and problems encountered in installing mariadb in centos under mysql

How to handle the tcp_mark_head_lost error reported by the Linux system

Example of configuring multiple SSL certificates for a single Nginx IP address

The failure to play flv/MP4 and other video files on the website is related to the MIME type.

How to install redis5.0.3 in docker

CSS layout tutorial: How to achieve vertical centering

Detailed steps for deploying https websites and configuring address rewriting in Nginx

Nginx reverse proxy configuration to remove prefix case tutorial