JavaScript 图片跟随鼠标移动

JavaScript实现图片跟随鼠标移动

首先在页面中添加一张图片

<img src="./img/mouse.jpg" alt="">

图片样式，注意一定要写position：absolute

img{ width: 100px; height: 100px; position: absolute; }

js代码

   <script>
        var img=document.querySelector("img")
        document.addEventListener("mousemove",function(e){
            var x=e.pageX
            var y=e.pageY
            img.style.top=y-50+"px"
            img.style.left=x-50+"px"
        })
    </script>

首先获取图片，之后给鼠标添加移动事件

document.addEventListener("mousemove",function(e){ }

获取鼠标的位置

        var x=e.pageX //鼠标距离页面左边的距离
        var y=e.pageY //鼠标距离页面上面的距离

移动图片

            img.style.top=y+"px"
            img.style.left=x+"px"  //此时鼠标在图片的左上角

            img.style.top=y-50+"px"    //各减去图片宽高的一半此时鼠标在图片的中心
            img.style.left=x-50+"px"

            img.style.top=y+10+"px"    //此时鼠标在图片的左上角之外
            img.style.left=x+10+"px"

效果展示：