我如何突出显示最接近鼠标的文本行？ [英] How can I highlight the line of text that is closest to the mouse?

问题描述

我有一个长文本，我想为用户提供一个阅读帮助：当前行应该突出显示。为了更容易，我将使用鼠标的Y坐标（这样，鼠标指针不会妨碍）。我有一个很大的DIV，它的id content 填满了整个宽度，还有一个很小的DIV，它的类为 content 文本（请参阅这里的示例）。

我正在使用jQuery 1.4。如何突出显示与当前鼠标位置最接近的文本行？

解决方案

不确定jQuery是否会帮助您很多，但你可以看一下 element.getClientRects 方法。 library / ms536435（VS.85）.aspxrel =noreferrer> MSDN and MDC 。更具体地说，MSDN上的这个例子是排序的类似于你想要达到的效果，使用一个巧妙的z-索引 div 元素来突出显示行，该元素位于由返回的坐标文本后面。 getClientRects（）。

您应该能够通过循环遍历文档 onmousemove 并检查以查看鼠标光标的y值是否>顶部和<每个矩形的底部并将巧妙的z-indexed div移动到相同的位置/高度。

所有当前的主流浏览器都支持 getClientRects（） 。

---

http://jsbin.com/avuku/15

已更新 - 使用Chrome ，IE6 / 7/8，Firefox，Opera，Safari。我在其他浏览器中遇到的最初问题与 DIV 需要 display：inline 相关。

再次更新 - 我不得不针对一些较新的问题参考此答案，因此我花时间更新它以重新调整窗口大小上的行。它看起来像其他人也一直在玩，现在在修订版15.

I have a long text and I'd like to offer the user a reading help: The current line should be highlighted. To make it easier, I'll just use the Y coordinate of the mouse (this way, the mouse pointer isn't going to get in the way). I have a big DIV with the id content which fills the whole width and a small DIV with the class content for the text (see here for an example).

I'm using jQuery 1.4. How can I highlight the line of text that is closest to the current mouse position?

解决方案

Not sure if jQuery will help you out much here, but you could take a look at the element.getClientRects method, documented on MSDN and MDC. More specifically, this example at MSDN is sort of similar to what you want to achieve, highlighting lines using a cleverly z-indexed div element that goes behind the text at the co-ordinates returned by getClientRects().

You should be able to achieve the same thing by looping through the TextRectangle objects returned in the document's onmousemove and checking to see if the y value of the mouse cursor is > the top and < the bottom of each rectangle and moving the cleverly z-indexed div to the same position/height.

All the current major browsers support getClientRects().

---

http://jsbin.com/avuku/15

UPDATED - working in Chrome, IE6/7/8, Firefox, Opera, Safari. The initial problems I had in the other browsers were related to the DIV needing to be display: inline.
UPDATED AGAIN - I had to refer to this answer for some newer questions, so I took the time to update it to recalc the lines on window resize. It looks like others have been playing around too, it's now on revision 15.

这篇关于我如何突出显示最接近鼠标的文本行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！