求解决JavaScript移动元素的问题

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


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>Documenttitle>
    <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>

望给个采纳，谢谢！
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>

这种闪烁的问题通常是由于重绘引起的。当元素的位置改变时，浏览器需要重新绘制元素，如果频繁地重绘元素，就会出现闪烁的情况。

要解决这个问题，一种方法是使用CSS3的transform属性，而不是修改元素的left和top属性。transform属性不会影响元素在文档流中的位置，因此在修改transform属性时，不会触发重绘。

可以使用以下代码来解决移动元素时的乱闪问题：

css


```css
#index {
    /* 去掉 left 和 top 属性 */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    position: absolute;
    /* 添加 transform 属性 */
    transform: translate(-50%, -50%);
}

```这样就可以在移动元素时避免闪烁的问题。