模拟鼠标移动

Question

考虑这种情况。用户在窗口内移动鼠标。我有窗口的尺寸和鼠标坐标。例如：

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

在一个容器内，还有另一个窗口。 我希望能够模拟鼠标移动并将元素（如

）放置在与用户输入类似的位置。

简单地说，如果用户的鼠标在窗口的左上角，则将元素放置在容器的左上角。

我可能想多了，但我觉得必须考虑容器的宽度和高度相对于窗口尺寸的比例才能准确地将元素放置在窗口中。因此，我不能仅根据用户输入的位置来放置对象，例如：

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

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

- Quatban Taco

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/
请注意，您需要启用弹出窗口。

- Nogare

---

是的，尽管情况相反，它确实有帮助。我想监听来自更大窗口（在这种情况下，弹出窗口）的鼠标输入，并在较小窗口上显示。同样的公式仍然适用吗？ - Quatban Taco

只需将 e.clientY / mainH * popH 替换为 e.clientY / popH * mainH，并将 e.clientX / mainW * popW 替换为 e.clientX / popW * mainW。 - Nogare

我想你指的分别是e.clientY * mainH / popH和e.clientX* mainW / popW。 - Quatban Taco

只需将 position: relative 添加到容器中，就会使所有使用 position: absolute 的元素具有默认的偏移量。 - Nogare

请查看此代码片段： https://codepen.io/chromesque/pen/ExRjqyw?editors=0010 - Quatban Taco