获取元素后面的文本 [英] Get text behind an element

问题描述

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

I am developing a magnifying glass and I was hoping I could get some help figuring out how I am going to do a step.

我做的是具有高于内容的z索引的div。它是可移动和可拖动的。它还有一个透明的背景，所以可以看到在其后面/下面的内容（图像和文字），具有较小的z-索引。

What I am doing is I have a div with a higher z-index than the content. It is moveable and draggable. It also has a transparent background so one can see the content (images & text) behind/underneath it that has a lesser z-index.

需要帮助的是这是：

我想弄清楚什么内容是在div后面（让我们给它一个ID #glass ）。

I want to figure out exactly what content is behind the div (let's give it an ID of #glass).

然后我的计划是在之前附加一个< span> ，然后使用CSS3尺度变换以增加尺寸，使得它看起来好像被放大。
如果你对如何放大的内容有一个更好的想法，请分享。

Then my plan was to append a <span> before and a closing one after and style it with CSS3 scale transforms to increase the size so it acts as if it is magnified. If you have a better idea on how to 'magnify' the content please share it.

所以我想在一个pseudo-代码是：

So what I am looking to do in a spot of pseudo-code is:

1. 获取 #glass 的位置。


2. 获取 #glass 后面的内容。


3. 将该内容存储在变量中或给它一个类或某事


4. 
   
5. 
   
6. 添加一个跨度之前和之后。


7. 并在#glass移动时重置以上。

1. Get position of #glass.
2. Get content behind #glass.
3. Store that in a variable or give it a class or something to refer it to.
4. Append a span before and after.
5. Style it with scale-transform.
6. Undo and reset the above when #glass moves.

我真的很感激任何和所有的帮助，任何这些步骤，但特别是2号和3号，因为我不知道如何做这些。

I would really appreciate any and all help with any of these steps, but especially number 2 and 3, As I have no idea on how to do those.

推荐答案

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

You can listen for the mousemove event on every element in the page. each time the event fires you update a variable with the latest node being hovered over.

当你在玻璃上拖动时，mousemove事件应该在玻璃后面的元素（因为你是悬停在他们）。

So as you are dragging around the glass, the mousemove event should be getting fired on the elements behind the glass (since you are hovering over them). And you can then use your latest node variable to get the element behind it.

这里是一个Jsfiddle演示如何完成这个操作：
http://jsfiddle.net/wWVuy/

Here a is Jsfiddle demonstrating how this could be done: http://jsfiddle.net/wWVuy/

这篇关于获取元素后面的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！