JavaScript 图片跟随鼠标效果

最新推荐文章于 2022-07-02 08:30:00 发布

火星飞鸟

最新推荐文章于 2022-07-02 08:30:00 发布

阅读量528

点赞数 3

分类专栏： JavaScript 前端基础文章标签： javascript

本文链接：https://blog.csdn.net/Jack_lzx/article/details/109270177

版权

前端基础同时被 2 个专栏收录

111 篇文章 2 订阅

订阅专栏

JavaScript

88 篇文章 1 订阅

订阅专栏

要求：

在浏览器页面中，图片实时跟随鼠标
鼠标在图片的中心位置

实现思路：

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

实现效果：

将代码复制到记事本中，并改名为xx.html，保存。使用浏览器打开即可。
在这里插入图片描述

代码实现：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            /* 因为图片不能影响页面其他的布局，所以用绝对定位 */
            position: absolute;
        }
    </style>
</head>

<body>
    <img src="https://img-blog.csdnimg.cn/20201026075813798.png" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            // 获取当前鼠标到页面的距离
            var x = e.pageX;
            var y = e.pageY;
            // 选用图片大小为50*50像素，让鼠标居中在它中间，x左移25px，y上移25px
            pic.style.left = x - 25 + 'px';
            pic.style.top = y - 25 + 'px';
        });
    </script>
</body>

</html>

火星飞鸟

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 图片跟随鼠标效果

要求：在浏览器页面中，图片实时跟随鼠标鼠标在图片的中心位置实现思路：鼠标不断移动，使用鼠标移动事件：mousemove在页面中移动，给document注册事件图片要移动距离，而且不占位置，使用绝对定位即可每次鼠标移动，获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫