Lucas-Li 2023-02-24 11:19 采纳率: 93.9%
浏览 30
已结题

求解决JavaScript移动元素的问题

解决移动元素时，乱闪的问题，代码如下：


<!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>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            position: relative;
            width: 100vw;
            height: 100vh;
            background: red;
        }

        #index {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: green;
            position: absolute;
            top: 0;
            left: 0;
        }

        #index2 {
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0);
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="index"></div>
        <div id="index2"></div>
    </div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        var index = document.getElementById("index");
        box.onmousemove = function (event) {
            var a = window.event || event;
            var x = a.offsetX - 50;
            var y = a.offsetY - 50;
            document.title = (x + "|" + y);
            index.style.left = x + "px";
            index.style.top = y + "px";
        }
    </script>
</body>

</html>
  • 写回答

2条回答 默认 最新

  • 全栈小5 全栈领域优质创作者 2023-02-24 12:19
    关注

    望给个采纳，谢谢！
    1、解决方法如下
    使用clientX，可见区域移动，因为使用offsetX 因为被识别到圆的区域移动

    img

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
        * { padding: 0; margin: 0; }

        #box { position: relative; width: 100vw; height: 100vh; background: #fff; }

        #index { width: 100px; height: 100px; border-radius: 50%; background: #ccc; position: absolute; top: 0; left: 0; }
        #index2 { width: 100px; height: 100px; background: rgba(0, 0, 0, 0); position: absolute; left: 0; top: 0; }
    </style>
</head>

<body>
    <div id="box">
        <div id="index"></div>
        <div id="index2"></div>
    </div>
</body>

</html>

<script type="text/javascript">

    var box = document.getElementById("box");
    var index = document.getElementById("index");
    box.onmousemove = function (event) {
        var a = window.event || event;
        var x = (a.clientX);
        var y = (a.clientY);

        console.log('xy', x + "," + y)
        document.title = (x + "|" + y);

        if (x < 50) {
            index.style.left = x + "px";
            index.style.top = y + "px";
        }
        else {
            index.style.left = x - 50 + "px";
            index.style.top = y - 50 + "px";
        }
    }
</script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 2月24日
  • 已采纳回答 2月24日
  • 创建了问题 2月24日

悬赏问题

  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测