JS鼠标移动显示图片

一夕ξ

已于 2022-04-12 15:05:26 修改

阅读量3.3k

点赞数 3

分类专栏：前端学习文章标签： javascript 开发语言 ecmascript

于 2022-02-26 22:01:25 首次发布

本文链接：https://blog.csdn.net/qq_45387575/article/details/123156626

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

1、鼠标不断移动，使用鼠标移动事件：mousemove

如果用的是mouseover的话，会造成鼠标移动过快，而无法显示的问题

2、在页面中移动，给document注册事件

3、图片要移动距离，而且不占位置，因此使用绝对定位

4、核心：每次鼠标移动，都会得到最新的鼠标坐标，把这个X和Y坐标作为图片的top和left值就可以实现移动图片

img.style.left = 'e.clientX '

img.style.top = 'e.clientY '

无法实现，应该不加引号，因为拿的是变量；其次需要加px

img.style.left = e.clientX + 'px'

img.style.top = e.clientY + 'px'

<!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 {
            width: 100px;
            height: 100px;
            /* 定位 */
            position: absolute;
            /* top: 300px;
            left: 100px */
        }
    </style>
</head>

<body>
    <!-- 在文档中插入gif图片 -->
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180810%2F0e343a9d87cd4cfeb32aa24b2cf676d9.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648473928&t=73a19d6fe6f1a24a6607f60b432ca490"
        alt="">
    <script>
        //获取鼠标的位置，来改变图片定位的位置
        var img = document.querySelector('img')
        document.addEventListener('mousemove', function(e) {
            img.style.left = e.clientX + 'px'
            img.style.top = e.clientY + 'px'
        })
    </script>
</body>

</html>

页面中的坐标必须带上单位

需要隐藏鼠标的话：在样式中加入

        * {
            cursor: none;
        }

让鼠标位于图片的中心：图片往上走图片高度的一半，往左走图片宽度的一半

            img.style.left = e.clientX - 50 + 'px'
            img.style.top = e.clientY - 50 + 'px'

jquery+增加节流阀优化

<!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>
        html,
        body {
            margin: 0px;
            padding: 0px;
            overflow: hidden
        }
        
        #angel {
            position: absolute;
            /* 一定要加绝对定位，这样才能改变图片的相对位置 */
            width: 60px;
            height: 60px
        }
    </style>
    <script src=".\lib\jquery.js"></script>
</head>

<body>
    <!-- UI结构 -->
    <img src="\07淘宝\angel.gif" alt="" id="angel">
    <script>
        $(function() {
            var angel = $('#angel')
            var timer = null //定义一个timer节流阀

            $(document).on('mousemove', function(e) {
                if (timer) {
                    return
                } //判断节流阀是否为空，如果不为空，则证明距离上次执行间隔不足16毫秒
                timer = setTimeout(function() {
                    $(angel).css('left', e.pageX - 50 + 'px').css('top', e.pageY - 50 + 'px')
                    timer = null //当设置了鼠标跟随效果后，清空timer节流阀，方便下次开启延时器
                }, 16)

                console.log('ok'); //使用节流来控制事件触发的频率
            })
        })
    </script>
</body>

</html>

一夕ξ

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS鼠标移动显示图片

1、鼠标不断移动，使用鼠标移动事件：mousemove如果用的是mouseover的话，会造成鼠标移动过快，而无法显示的问题2、在页面中移动，给document注册事件3、图片要移动距离，而且不占位置，因此使用绝对定位4、核心：每次鼠标移动，都会得到最新的鼠标坐标，把这个X和Y坐标作为图片的top和left值就可以实现移动图片 img.style.left = 'e.clientX ' img.style.top = 'e.clientY '无法...
复制链接

扫一扫