图片在 <div> 中跟随鼠标答案

【问题标题】：Picture follow a mouse in a <div>图片在 <div> 中跟随鼠标
【发布时间】：2011-05-30 14:04:32
【问题描述】：

如何在特定的<div> 中使图片跟随鼠标？

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

获取我的 div top、left、width 和 height 并做一些数学运算，如果鼠标移动在div之外，为图片设置visibility:hidden。

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

【问题讨论】：

叫做tooltip，jquery和mootools有很多插件可以用tooltips做各种事情。
@Marc 是否有任何 javascript 示例代码？我不想使用 jquery。我在哪里可以找到这些工具提示
jquery 和 mootools 是 javascript。它们只是辅助库，它们是做你想做的最简单的方法。他们为您处理所有愚蠢的浏览器不兼容问题。如果你想推出自己的工具提示库，那就继续吧，但你会浪费很多时间让它在每个浏览器中工作。
我知道它们是，但我需要更多速度功能，有时 jquery 不是一个好功能

标签： javascript

【解决方案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 上方时才会将您的图片移动到鼠标上。

【讨论】：

我无法运行您的代码？图片不动。你能解释一下e.pageY*1 + 5 + "px"的含义吗？
@hamze 你可以在这里试试我的代码：jsfiddle.net/inti/j7eMz 你问的部分的意思是：鼠标的 X 坐标乘以 1 以确保它是一个整数，而不是加 5 与鼠标的一点距离，最后是“px”，因为 style.left 接受具有某些单位的值。
它是有线的，当我将您的代码添加到 htm 文件时，图像不会移动，并且出现此错误：document.getElementById("mydiv") is null
@hamze "mydiv" 在我的示例中是div 的id。您必须将其更改为您的div 的id。 "myimg" 也是如此。此外，此 javascript 代码必须在您的 div 在页面中创建之后运行。

【解决方案2】：

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

【讨论】：