js 图片跟随鼠标移动效果 案例

<!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>