js实现鼠标跟随

最新推荐文章于 2023-11-29 18:00:00 发布

一只不会飞的蜜蜂

最新推荐文章于 2023-11-29 18:00:00 发布

阅读量985

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_61457731/article/details/127825096

版权

利用js实现图片跟随鼠标移动

涉及的知识

主要利用的是鼠标事件mousemove

利用e.pageX和e.pageY获取鼠标在屏幕中的位置，并利用定位absolute的top和left实现实时跟踪鼠标

在body样式中加入cursor: none;来隐藏鼠标

<body>
    <style>
        body{
            cursor: none;
        }
        img {
            width: 200px;
            top: 0;
            left: 0;
            
        }
    </style>
    <img src="../images/人物2.png" alt="">
    <script>
        var img = document.querySelector('img')
        document.addEventListener('mousemove',function(e) {
            var x = e.pageX
            var y = e.pageY
            img.style.top=y-100 + 'px'
            img.style.left=x-100 + 'px'
            


        })
    </script>
</body>