js鼠标事件实现图片随着鼠标移动

南棠北往

已于 2022-04-08 11:20:45 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-04-08 11:19:08 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56329037/article/details/124034623

本文通过JavaScript展示了如何实现图片随着鼠标移动而移动的效果。主要逻辑包括监听mousemove事件，利用绝对定位调整图片的位置，使图片在鼠标下方显示。代码中，获取图片元素并为其设置样式，然后在鼠标移动时更新图片的left和top属性，实现图片随鼠标的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js鼠标事件实现图片随着鼠标移动

逻辑分析

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

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            position: absolute;
            width: 100px;
            height: 80px;
            z-index: 11;
        }
    </style>
</head>
<body>
    <img src="./follow.gif" alt="" srcset="">
</body>
<script>
    // 获取图片
    var pic=document.querySelector('img');
    // 注册事件
    document.addEventListener('mousemove',function(e){
        // mousemove只要鼠标移动一像素就会触发这个事件
        console.log(1)
        // 拿到x,y 的坐标
        var x= e.pageX;
        var y= e.pageY;
        //把坐标赋予图片的定位坐标,不要忘了给坐标加单位
        // 赋予完之后默认图片会在箭头的右下方显示，若想在正中间显示，则需要减去图片宽度的一半，和高度的一半
        pic.style.left=x-50+'px';
        pic.style.top=y-40+'px';
    });
</script>
</html>