如何突出显示最接近鼠标的文本行？

Question

我有一个很长的文本,我想为用户提供阅读帮助:当前行应突出显示.为了使它更容易,我将只使用鼠标的Y坐标(这样,鼠标指针不会妨碍).我有一个带有id的大DIV,content它填充了整个宽度,还有一个带有content文本类的小DIV (参见这里的例子).

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

Answer 1

不确定jQuery是否会在这里帮助你,但你可以看一下MSDN和MDCelement.getClientRects上记录的方法.更具体地说,MSDN上的这个例子有点类似于你想要实现的内容,使用巧妙的z-indexed 元素突出显示行,该元素位于返回的坐标处的文本后面.divgetClientRects()

您应该能够通过循环文档中返回的TextRectangle对象onmousemove并检查鼠标光标的y值是>顶部和<每个矩形的底部并移动巧妙的z-indexed div来实现相同的功能.到相同的位置/高度.

所有当前主流浏览器都支持getClientRects().

http://jsbin.com/avuku/15

更新 - 在Chrome,IE6/7/8,Firefox,Opera,Safari中工作.我曾在其他浏览器最初的问题是关系到DIV需要要display: inline.
再次更新 - 我不得不在一些较新的问题上参考这个答案,所以我花时间更新它以重新调整窗口大小调整的行.看起来其他人一直在玩,它现在正在修订版15.

Answer 2

我没有看到如果没有明确包装的文本(即换行符或<br>元素),你怎么可能做到这一点.

据我所知,DOM无法发现特定文本片段的位置,字符方式或像素方式 ​​- 包括我所知道的Range API - 更不用说动态自然文本可以假设,例如浏览器的文本缩放功能.

但如果你能以某种方式设法生成/注入明确的行结尾,那么我认为我有一个解决方案.

编辑

感谢Pekka答案中的精彩信息,我拼凑了一个功能原型,但它有一个重要的警告 - 仅适用于纯文本内容.任何HTML存在元素的主体将被剥离.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.4.1"); </script>
<script type="text/javascript">

  jQuery.fn.wrapLines = function( openTag, closeTag )
  {
    var dummy = this.clone().css({
            top: -9999,
            left: -9999,
            position: 'absolute',
            width: this.width()
        }).appendTo(this.parent())
      , text = dummy.text().match(/\S+\s+/g);

    var words = text.length
      , lastTopOffset = 0
      , lines = []
      , lineText = ''
    ;

    for ( var i = 0; i < words; ++i )
    {
      dummy.html(
          text.slice(0,i).join('') +
          text[i].replace(/(\S)/, '$1<span/>') +
          text.slice(i+1).join('')
      );

      var topOffset = jQuery( 'span', dummy ).offset().top;

      if ( topOffset !== lastTopOffset && i != 0 )
      {
        lines.push( lineText );
        lineText = text[i];
      } else {
        lineText += text[i];
      }

      lastTopOffset = topOffset;
    }
    lines.push( lineText );

    this.html( openTag + lines.join( closeTag + openTag ) + closeTag );
  };

  $(function()
  {
    $('p').wrapLines( '<span class="line">', '</span>' );
  });

</script>

<style type="text/css">
span.line:hover {
  background-color: lightblue;
}
</style>

<p style="width: 400px;">
 one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twenty-one twenty-two twenty-three
</p>