마우스에 가장 가까운 텍스트 줄을 어떻게 강조 표시 할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/2456442

문제

긴 텍스트가 있고 사용자에게 읽기 도움을 제공하고 싶습니다. 현재 줄을 강조 표시해야합니다. 더 쉽게하기 위해 마우스의 Y 좌표 만 사용하겠습니다 (이 방법으로 마우스 포인터가 방해가되지 않습니다). 나는 신분증과 큰 div가 있습니다 content 클래스와 함께 전체 너비와 작은 div를 채 웁니다. content 텍스트를 위해 (예를 들어 여기를 참조하십시오).

jQuery 1.4를 사용하고 있습니다. 현재 마우스 위치에 가장 가까운 텍스트 줄을 어떻게 강조 표시 할 수 있습니까?

도움이 되었습니까?

해결책

jQuery가 여기에서 많은 도움이 될지 확실하지 않지만 element.getClientRects 문서화 된 방법 MSDN 그리고 MDC. 더 구체적으로, 이 예 MSDN은 달성하고자하는 것과 유사하며 영리하게 Z-indexed를 사용하여 선을 강조 표시합니다. div 반환 된 코디네이터에서 텍스트 뒤에있는 요소 getClientRects().

문서에서 반환 된 Textrectangle 개체를 통해 반복하여 동일한 것을 달성 할 수 있어야합니다. onmousemove 그리고 마우스 커서의 y 값이> 각 사각형의 상단과 <하단인지 확인하고 영리하게 z- 인덱스 된 div를 동일한 위치/높이로 움직입니다.

현재 모든 주요 브라우저가 지원합니다 getClientRects().

http://jsbin.com/avuku/15

업데이트되었습니다 -Crome, IE6/7/8, Firefox, Opera, Safari에서 작업합니다. 다른 브라우저에서 내가 가진 초기 문제는 DIV 필요합니다 display: inline.
다시 업데이트되었습니다 - 새로운 질문에 대해서는이 답변을 언급해야했기 때문에 시간이 걸렸습니다. 다른 사람들도 놀고있는 것 같습니다. 이제 개정 15에 있습니다.

다른 팁

나는 당신이 명시 적으로 포장 된 텍스트없이 어떻게 이것을 할 수 있는지 모르겠습니다 (예 : Newlines 또는 <br> 집단).

내가 아는 한, DOM이 특정 텍스트 조각이 문자로 포장 된 위치를 발견 할 수있는 방법은 없습니다. ...도 아니다 Pixel -Wise- 내가 아는 것을 포함하여 범위 API - 브라우저의 텍스트 Zooming 기능과 같은 동적 자연 텍스트는 말할 것도 없습니다.

그러나 어떻게 든 명시 적 라인 엔딩을 생성/주입 할 수 있다면, 나는 당신을위한 해결책이 있다고 생각합니다.

편집하다

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>

떠오르는 가장 좋은 접근법은 각 라인을 <span> 또는 <div> a :hover "하이라이트"설정 세트가있는 CSS 클래스 :

span.line:hover { background-color: lightblue; }

브라우저가 모든 강조 표시 자체를 처리하기 때문에 가장 저렴한 솔루션입니다. 멋진 효과를 원한다면 여전히 추가하여이를 달성 할 수 있습니다. mouseover 그리고 mouseout 모든 라인에 대한 이벤트.

물론 어려운 부분은 브라우저의 라인 브레이크에서 콘텐츠를 라인으로 나누는 것입니다. 라인이 실제로 브라우저가 텍스트를 끊는 위치를 반영하도록 동적으로 수행해야합니다.

아마도이 질문에 대한 받아 들여진 대답은 올바른 방향으로 나아가는 단계 일 것입니다.

jQuery를 사용하여 특정 라인을 얻습니다

작동 방식 :

각 단어 내에 요소를 삽입하는 전체 요소 (실제로 요소의 클론)를 통과합니다. 스팬의 상단 오프셋은 캐시됩니다.이 오프셋이 변경되면 우리는 새로운 라인에 있다고 가정 할 수 있습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top