js 鼠标跟随

最新推荐文章于 2023-11-02 16:10:14 发布

皮蛋solo粥！

最新推荐文章于 2023-11-02 16:10:14 发布

阅读量931

点赞数 1

文章标签： html eclipse css3

本文链接：https://blog.csdn.net/weixin_46287150/article/details/121551533

版权

js 鼠标跟随
可根据点击按下事件改为按下跟随松开即回归原位
在这里插入图片描述
css代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 50px;
            height: 50px;
            background-color: orangered;
            border-radius: 50%;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>

html代码

<body>
    <div></div>
</body>

js代码

<script>
    //获取div元素
    var div=document.querySelector('div')

    //给 document 绑定一个鼠标移动事件
    document.onmousemove=function(e){
        //拿到光标相对于窗口的坐标点位
        var x=e.clientX
        var y=e.clientY

        //把拿到的x,y的值赋值给div标签的top和left
        div.style.left=x+'px'
        div.style.top=y+'px'


        //可通过加减像素调整跟随的位置
        // div.style.left=x-10+'px'
        // div.style.top=y-10+'px'
    }
</script>

皮蛋solo粥！

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js 鼠标跟随

js 鼠标跟随可根据点击按下事件改为按下跟随松开即回归原位css代码<style> *{ margin: 0; padding: 0; } div{ width: 50px; height: 50px; background-color: orangered; border-radius: 50
复制链接

扫一扫