js 图片跟随鼠标移动

叒叒叒是pink老师的课里讲了一个非常有意思的案例
图片可以跟着鼠标移动
主要是添加一个mousemove的监听事件 实时获取鼠标的坐标 同时改变图片的坐标

html

<img src="gif.gif" alt="" style="position: absolute;">
//位置要为绝对 才能不占用位置

js

<script>
var pic = document.querySelector('img')
   document.addEventListener('mousemove',function(e){
       var x = e.pageX
       var y = e.pageY
       pic.style.left = x+1 + 'px'
       pic.style.top = y+1 + 'px'
       //为啥要+1呢  因为如果不+1的你的鼠标永远在图片的左上角 
       //就不能点击页面中的其他元素了
</script>