1

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

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

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

我想弄清楚 div 背后的确切内容（让我们给它一个 ID #glass）。

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

所以我希望在伪代码中做的是：

  1. 获取 的位置#glass。
  2. 获取内容落后#glass。
  3. 将其存储在变量中或给它一个类或其他东西来引用它。
  4. 在前后附加一个跨度。
  5. 使用比例变换对其进行样式设置。
  6. 当#glass 移动时撤消并重置上述内容。

对于这些步骤中的任何一个，我真的很感激任何和所有的帮助，尤其是第 2 和第 3 步，因为我不知道如何做这些。

4

1 回答 1

0

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

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

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

于 2012-07-11T15:25:24.200 回答