图片跟随<div> </div>中的鼠标

Question

如何在特定<div>？

中制作照片

我知道我可以从e.pageX & e.pageY获取鼠标位置并使用代码document.onmousemove = followmouse;。每当鼠标在页面中移动时运行followmouse功能，在followmouse功能中，将图片位置设置为鼠标位置。对于我在这里问到的确切问题（如何在特定的<div>中按照鼠标制作图片），我有这个想法：

获取我的div 顶部，左，宽度和身高并做一些数学运算，如果鼠标去了在div之外，为图片设置visibility:hidden。

但是，有没有简单的方法可以做到这一点？

Answer 1

我们假设你有一些HTML这样，

<div id="mydiv" style="width: 300px; height: 300px;"></div>
<img id="myimg" style="position: absolute;" alt="" />

然后

document.getElementById("mydiv").onmousemove = function(e) {
    document.getElementById("myimg").style.top = e.pageY*1 + 5 + "px";
    document.getElementById("myimg").style.left = e.pageX*1 + 5 + "px";
}

只有当鼠标位于div上时，

才会将图片移动到鼠标。

Answer 2

只要图片实际包含在div中并且您相对于其正常位置移动它，那么我认为在包含overflow:hidden上设置div应该有效。当我说“设置”时，我并不是说每次鼠标移到外面，而只是在主CSS移动一次。