模拟鼠标运动

Question

考虑一下这个场景。用户将鼠标移动到窗口内。我有窗口尺寸和鼠标坐标。例如：

let userInput = {
    window: {
        height: 822,
        width: 1440
    },
    mouse: {
        x: 1068,
        x_pct: "74.167",
        y: 1,
        y_pct: "0.111"
    }
}

在一个容器里，在另一个窗口里。我想模拟鼠标的移动，并将一个元素(如div )放置在类似于userInput中鼠标位置的位置上。

一个简单的解释是，如果用户鼠标在窗口的左上角，将元素放在容器的左上角。

我可能是过激，但我觉得容器的宽度和高度必须考虑相对于窗口的尺寸，以便将元素准确地放置在窗口中。因此，我不能仅仅将对象放在与userInput提供的位置相同的位置，例如：

element.style.left = userInput.mouse.x + "px";
element.style.top = userInput.mouse.y + "px";

我觉得我需要一个公式或算法来完成这个任务。任何帮助都是非常感谢的。

Answer 1

这个简单的片段可以帮你。

const myNewWindow = window.open("", "", "left=,top=10,width=320,height=320")
myNewWindow.document.write("<div id='target' style='position:absolute; background:red;'>Hello world!</div>")

document.addEventListener("mousemove", (e)=>{
    const mainW = window.innerWidth;
    const mainH = window.innerHeight;
    const popW = myNewWindow.innerWidth;
    const popH = myNewWindow.innerHeight;

    myNewWindow.document.getElementById("target").style.top = e.clientY / mainH * popH;
    myNewWindow.document.getElementById("target").style.left = e.clientX / mainW * popW;
});

通过这里的工作示例：https://jsfiddle.net/nogare/1tejzmux/

注意，您需要启用弹出窗口。