mousemove实现图片鼠标跟随效果

乌秋

已于 2023-04-08 00:48:52 修改

阅读量1.1k

点赞数 7

分类专栏： # 前端知识分享文章标签： javascript html css

于 2023-04-08 00:44:43 首次发布

本文链接：https://blog.csdn.net/weixin_46372993/article/details/130023081

版权

前端知识分享专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

用html+css+JavaScript实现了一个图片鼠标跟随效果

一、思路

鼠标不断的移动，使鼠标移动事件：mousemove；
在页面中移动，给document注册事件；
图片要移动距离，而且不占位置，我们可以使用绝对定位；
核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x轴和y轴坐标作为图片的top和left值就可以移动图片。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        img {
            position: absolute;
            top: 2px;
            max-width: 100px;
            height: auto;
            cursor: none;
        }
    </style>
</head>

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


    });
</script>

</html>

代码解析：

当鼠标在页面上移动时，通过监听document的mousemove事件，获取鼠标的坐标pageX和pageY，并将图片的位置设置为鼠标坐标减去50像素（因为我这个图片设置的是100*100，减去50就会使鼠标居中）。通过这样的方式，就可以实现图片跟随鼠标移动的效果。需要注意的是，这段代码前提是页面上存在一个img元素，代码中使用document.querySelector方法获取该元素。