设置一个可以跟随鼠标移动的图标

最新推荐文章于 2024-04-10 10:34:13 发布

wind-Code

最新推荐文章于 2024-04-10 10:34:13 发布

阅读量436

点赞数 1

本文链接：https://blog.csdn.net/mastercao/article/details/123505158

版权

JavaScript 鼠标事件图片定位 CSS样式动态效果

关键词由CSDN通过智能技术生成

javaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vsCode

8 篇文章 0 订阅

订阅专栏

<!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;
            top:2px;
        }
    </style>
</head>
<body>
    <img src="../事件基础/img/logo-mi2.png" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            // 核心原理  每次鼠标移动的最新坐标赋值给图片的top 和left 来移动图片
            var x = e.pageX;
            var y = e.pageY;
            pic.style.top = y + 'px';  // 图片的位置一定要用数字+px来表示
            pic.style.left = x + 'px';

        })
    </script>
</body>
</html>

在这段代码里边不仅要监听鼠标移动事件，还用到了获取鼠标在文档页面上的位置（x和y坐标）

获得坐标之后赋值给图片的top 和 left 这样图片就可以跟随鼠标进行移动了在赋值时注意一定要添加单位 px 不然仅仅获得的数字是无用的

wind-Code

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
设置一个可以跟随鼠标移动的图标

<!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>Do.
复制链接

扫一扫

专栏目录