图片跟随鼠标的移动案例

最新推荐文章于 2022-08-25 18:41:00 发布

捞起月亮的渔民~

最新推荐文章于 2022-08-25 18:41:00 发布

阅读量347

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_52622178/article/details/118903334

版权

js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

核心原理：每次鼠标移动，我们获取鼠标的最新坐标，将获取的X,Y坐标作为图片的top，left值。

注意：
代码中有两点需要格外注意：
1.我第一次写完的时候，发现图片不随鼠标的移动而移动，最后才知道是没有添加定位（添加绝对定位是因为绝对定位在文档流中不占位置），img是行内元素，没有top，left值。
2.在给top，left赋值的时候，千万不要忘记加 px

 <style>
        /* 若不加绝对定位，图片不会随着鼠标走，绝对定位不占位置 */
        img{
            position: absolute;
        }
    </style>
</head>
<body>
    <img src="./image/angel.gif" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            // 获取鼠标的x,y坐标
            var x = e.pageX;
            var y = e.pageY;
            //让鼠标在图片的正中间
            img.style.left=x-40 +'px';
            img.style.top = y-40 +'px';
        });
    </script>

捞起月亮的渔民~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片跟随鼠标的移动案例

核心原理：每次鼠标移动，我们获取鼠标的最新坐标，将获取的X,Y坐标作为图片的top，left值。注意：代码中有两点需要格外注意：1.我第一次写完的时候，发现图片不随鼠标的移动而移动，最后才知道是没有添加定位（添加绝对定位是因为绝对定位在文档流中不占位置），img是行内元素，没有top，left值。2.在给top，left赋值的时候，千万不要忘记加 px <style> /* 若不加绝对定位，图片不会随着鼠标走，绝对定位不占位置 */ img{
复制链接

扫一扫