鼠标宠物跟随--图片跟随鼠标移动

最新推荐文章于 2024-10-30 22:25:38 发布

慕慕和小绵羊

最新推荐文章于 2024-10-30 22:25:38 发布

阅读量495

点赞数

文章标签：计算机外设 js

本文链接：https://blog.csdn.net/qq_46617150/article/details/130893487

版权

该文章介绍了一个用JavaScript实现的案例，通过监听mousemove事件获取鼠标坐标，并将坐标值应用到图片的CSS样式上，使图片在页面中跟随鼠标移动。代码示例展示了如何设置图片的绝对定位以及如何更新其left和top属性。

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

实现效果

在这里插入图片描述

案例分析

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>天使跟随鼠标移动</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
    <img src="../imgs/angel.gif" alt="">
    <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-40+'px';
        })
    </script>
</body>
</html>