<!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>Document</title> <style> img{ position: absolute; /*因为跟着鼠标移动，不占用位置，所以使用绝对定位*/ } </style> </head> <body> <img src="./images/tianshi.jpg" alt=""> <script> var pic = document.querySelector('img') document.addEventListener('mousemove',function(e){ //1.mousemove 只要鼠标移动1px 就会除服事件 //2.核心原理：每次鼠标移动，我们都会获取最新的鼠标坐标，把这个x和y坐标作为图片的top和left值 //就可以移动图片了 var x = e.pageX; var y= e.pageY; //page返回的是从可以滚动条的最顶端开始到鼠标点击Y轴的坐标 ie9+以上支持 最常用 console.log(x,y) pic.style.left=x + 'px'; //注意一定要增加单位 pic.style.top=y + 'px'; }) </script> </body> </html>