JS跟随鼠标的小天使案例

<body>

    <!-- 使用鼠标移动事件 mousemove 

    在页面中移动 给document注册事件

    图片要移动距离 而且不占位置 我们使用绝对定位即可

    核心原理：每次鼠标移动 我们都会获得最新的鼠标坐标 把这个xy坐标作为图片的top和left值就可以移动图片

    -->

    <img src="./img/显示.png" alt="">

    <script>

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

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

            //mousemove只要我们鼠标移动1px 就会触发这个事件

            var x = e.pageX;

            var y = e.pageY;

            console.log(x, y);

            pic.style.left = x + 'px';

            pic.style.top = y + 'px'; //千万不要忘记给xy加px

        })

    </script>

</body>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容