获取元素后面的文本

Question

我正在开发放大镜，我希望能得到一些帮助，弄清楚我将如何迈出一步。

我正在做的是我有一个比内容更高的z-index的div。它是可移动的和可拖动的。它还具有透明背景，因此可以看到其后面/下面具有较小z-index的内容（图像和文本）。

现在我需要帮助的部分是：

我想确切地知道div背后的内容（让我们给它一个#glass的ID）。

然后我的计划是在之前追加<span>并在之后关闭一个，并使用CSS3缩放变换来设置它以增加大小，使其像放大一样。 如果您对如何“放大”内容有更好的了解，请分享。

所以我想在一些伪代码中做的是：

1. 获取#glass的位置。
2. 获取#glass后面的内容。
3. 将其存储在变量中或为其提供类或其他内容以引用它。
4. 在前后追加一个范围。
5. 使用缩放变换设置样式。
6. 当#glass移动时撤消并重置上述内容。

我非常感谢任何这些步骤的所有帮助，尤其是第2和第3步，因为我不知道如何做到这些。

Answer 1

您可以在页面中的每个元素上侦听mousemove事件。每次事件触发时，您都会更新一个悬浮在最新节点上的变量。

因此，当你在玻璃杯周围拖动时，应该在玻璃后面的元素上触发mousemove事件（因为你将它们悬停在它们上面）。然后，您可以使用最新的节点变量来获取它背后的元素。

这里有一个Jsfiddle演示如何做到这一点： http://jsfiddle.net/wWVuy/