javascript：制作一个iframe来获取鼠标的x＆amp; y

Question

我有一个iframe

<iframe id="EXAMPLE"></iframe>

编辑： 如何使用javascript实时制作iframe实时鼠标？

Answer 1

在HTML中你有这个：

<iframe src="http://example.com" id="test"></iframe>

设置一些CSS样式：

body {
    width: 500px;
    height: 500px;
    background-color: black;
}

#test {
    left: 10px;
    top: 10px;
    position: absolute;
}

现在，您必须在文档上获取鼠标位置。您可以使用jQuery mousemove处理程序：

$("body").on("mousemove", function(e) {
    console.log("X: " + e.clientX + "px Y: " + e.clientY + "px");
});

然后，在文档上设置iframe位置：

function update(e) {
    $("#test").css("left", e.clientX + 10 + "px");
    $("#test").css("top", e.clientY + 10 + "px");
}

现在，只需在update内调用mousemove函数。

查看实时预览here。

如果您想在[{1}}上检测到mousemove，请将iframe添加到pointer-events:none个样式。经过测试here。