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 回答