js实现鼠标跟随

最新推荐文章于 2023-01-02 01:48:07 发布

清酒独酌

最新推荐文章于 2023-01-02 01:48:07 发布

阅读量491

点赞数

分类专栏： javascript 文章标签： javascript css 前端 html

本文链接：https://blog.csdn.net/yang68668/article/details/121166308

版权

JavaScript 鼠标移动绝对定位响应式设计 div元素

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

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

<style>
        body {
            background-color: black;
            /* 吧鼠标隐藏 */
            cursor: none;
        }
        
        #box {
            width: 100px;
            height: 100px;
            /*  background-image: url(./img/src=http\ _hbimg.b0.upaiyun.com_f3036a3b5396956d8a3854d4f245f2597795fc8a4b269-YIXvKe_fw658&refer=http\ _hbimg.b0.upaiyun.com&app=2002&size=f9999\,10000&q=a80&n=0&g=0n&fmt=jpeg.gif);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 150px; */
            background-color: rgb(156, 156, 156);
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
    <script>
        /* 获取box */
        var box = document.getElementById('box')
            /* 绑定鼠标移动事件 */
        document.onmousemove = function(e) {
            /* 获取x位置 */
            var x = e.pageX;
            /* 获取y位置 */
            var y = e.pageY;
            /* 设置左右，通过定位 */
            box.style.left = x - (box.offsetWidth / 2) + 'px'
            box.style.top = y - (box.offsetHeight / 2) + 'px'
        }
    </script>
</body>

清酒独酌

关注

0
点赞
踩
3

收藏

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

<style> body { background-color: black; /* 吧鼠标隐藏 */ cursor: none; } #box { width: 100px; height: 100px; /* background-image: url(./img/src=http.
复制链接

扫一扫

专栏目录