Pink老师JavaScript课堂案例 - 跟随鼠标指针移动

鼠标移动实时位置追踪：CSS+JavaScript实例

原创于 2022-03-14 20:59:51 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #css

课程案例专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现一个简单的鼠标位置跟踪效果，通过监听鼠标移动事件，实时更新图片的位置。适合初学者了解前端交互的基本原理。

效果

代码

 <style>
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }
    </style>

 <img src="/images/R-C.gif" alt="">
    <script>
        var img = document.querySelector('img')
        document.addEventListener('mousemove', function (e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.top = y+'px';
            img.style.left = x+'px';

        })
    </script>