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

JavaScript to make the picture move with the mouse

Implementation ideas

Tips:

Example

How to create a child process in nodejs

JavaScript event capture bubbling and capture details

TypeScript generic parameter default types and new strict compilation option

The past two years with user experience

Building a KVM virtualization platform on CentOS7 (three ways)

CentOS IP connection network implementation process diagram

Example of using JS to determine whether an element is an array

How to deploy Oracle using Docker on Mac

MySQL and sqlyog installation tutorial with pictures and text

Coexistence of python2 and python3 under centos7 system

Recommend

The difference between the four file extensions .html, .htm, .shtml and .shtm

Analysis of the Docker image construction principle (you can build an image without installing Docker)

About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)

Creation, constraints and deletion of foreign keys in MySQL

8 powerful techniques for HTML web page creation

Repair solution for inconsistent MySQL GTID master and slave

How to use Nginx to proxy multiple application sites in Docker

How to configure Nginx virtual host in CentOS 7.3

MySQL Practical Experience of Using Insert Statement

Steps to install MySQL 8.0.23 under Centos7 (beginner level)

Case study of dynamic data binding of this.$set in Vue

A brief analysis of Vue's asynchronous update of DOM

Implementation of vue+drf+third-party sliding verification code access

Tutorial diagram of installing TomCat in Windows 10

CSS modular solution