Shulou(Shulou.com)06/03 Report--

This article mainly introduces javascript how to follow the mouse movement of the picture, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

Realization idea

1. Bind the mousemove event to document to obtain the mouse coordinates: e.pageX, e.pageY

2. Set the image to absolute positioning: position: absolute

3. Get the picture element object and assign the x and y coordinates of the mouse to the left and top values of the picture respectively. When the mouse is in the middle of the picture, you can subtract half of the width and height of the picture and make the picture position upward to the left. Note: don't forget to add the unit 'px'.

A little knowledge:

E.clientX-gets the x-axis coordinates of the mouse, relative to the visible area of the browser window

E.clientY-gets the Y-axis coordinates of the mouse, relative to the visible area of the browser window

E.pageX-gets the mouse x-axis coordinates, relative to the document page

E.pageY-gets the Y axis coordinates of the mouse, relative to the document page

E.screenX-gets the mouse x-axis coordinates, relative to the computer screen

E.screenY-get the Y-axis coordinates of the mouse, relative to the computer screen

Example

Code example:

Get mouse coordinates img {/ * width: 80px; height: 90px; * / position: absolute;}

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';})

Page effect:

Thank you for reading this article carefully. I hope the article "how to follow the picture of javascript moving with the mouse" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.