鼠标图片跟随案例

 实现图片跟着鼠标的移动而移动：

1.

css:

给图片添加绝对定位

<style>

        img {

            position: absolute;

        }

  </style>

 

HTML：

随意放一张图片

<img src="logo.png" alt="">

 

JS:

    <script>

　　 // 给document添加事件

        document.addEventListener('mousemove', function(e) {

　　　  //获取图片对象；

            var img = document.querySelector('img');

　　　//通过上方事件对象e，获取到xz轴和y轴的值

            var x = e.pageX;

            var y = e.pageY;

　　　　//给图片添加相应的位置，注意里面的-20是把我的图片放中间，可以根据自己的情况修改。

            img.style.left = x - 20 + 'px';

            img.style.top = y - 20 + 'px';

        })

    </script>