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