图片放大镜用的就是这个思路
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>小天使跟随鼠标</title> <style> img { position: absolute; } </style> </head> <body> <img id="angel" src="image/angel.gif" alt=""> <script> var img = document.getElementById('angel'); //onmousemove 每移动1px就会触发 img.addEventListener('mousemove', function (e) { var x = e.pageX; var y = e.pageY; img.style.left = x -50 + 'px'; img.style.top = y -40 + 'px'; //-50 -40 是让鼠标到图片的中间 }) </script> </body> </html>
用到的图片