问题描述
我有一个很长的文本,我想为用户提供阅读帮助:应突出显示当前行.为方便起见,我将只使用鼠标的 Y 坐标(这样,鼠标指针就不会碍事).我有一个 id content
的大 DIV 填充整个宽度和一个小 DIV 的类 content
用于文本(参见此处的示例).
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).
我使用的是 jQuery 1.4.如何突出显示最接近当前鼠标位置的文本行?
I'm using jQuery 1.4. How can I highlight the line of text that is closest to the current mouse position?
推荐答案
不确定 jQuery 是否会在这里帮助你很多,但你可以看看 element.getClientRects
方法,记录在MSDN 和 MDC.更具体地说,MSDN 上的这个示例是排序类似于您想要实现的目标,使用巧妙的 z 索引 div
元素突出显示行,该元素位于 getClientRects()
返回的坐标处的文本后面.
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()
.
您应该能够通过循环访问文档的 onmousemove
中返回的 TextRectangle 对象并检查鼠标光标的 y 值是否 > 顶部和
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.
当前主流浏览器都支持getClientRects()
.
All the current major browsers support getClientRects()
.
更新 - 在 Chrome、IE6/7/8、Firefox、Opera、Safari 中工作.我在其他浏览器中遇到的最初问题与需要 display: inline
的 DIV
相关.
再次更新 - 对于一些较新的问题,我不得不参考这个答案,所以我花时间更新它以重新计算窗口调整大小的行.看起来其他人也一直在玩,现在是修订版 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.
这篇关于如何突出显示最靠近鼠标的文本行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!