4

私は現在、人々が読むためのたくさんの物語を特集するウェブサイト（基本的にはブログ）に取り組んでいます。できるだけ読みやすくしたいので、カーソルでテキストの行を「強調表示」すると便利だと思いました。本を読むときは、指でテキストの行をたどるのが好きです。

私はこの答えに出くわしました、しかし私はそれを私のページのために働かせることができないようです。これもかなり古い答えなので、おそらくこれの改善されたバージョンがありますか？

誰かが私を助けてくれるなら、私は永遠に感謝するでしょう！

4

2 に答える 2

3

少なくとも私にとっては、参照している投稿のコードよりも見た目も機能も優れているjQueryコードをいくつか作成しました。それがあなたのニーズに合うことを願っています:)

http://jsfiddle.net/gFTrS/2/にもライブデモがあります

HTML

<div class="textWrapper">
    <div class="highlight"></div>
    <p>Your text goes here</p>
</div>

CSS

.textWrapper
{
    position: relative;
    width: 600px;
    padding: 0px 10px;
    margin: 0 auto;
    cursor: default;
}

.textWrapper p
{
    font: normal 12px Arial;
    color: #000000;
    line-height: 18px;
    padding: 0;
    margin: 0;
}

.highlight
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: yellow;
    z-index: -1;
    display: none;
}

jQuery

$(document).ready(function()
{
    var lineHeight = 18;

    $('.textWrapper').hover(function()
    {
        $('.highlight', this).show();

        $(this).mousemove(function(e)
        {
            var relativePos = e.pageY - this.offsetTop;
            var textRow = (Math.ceil(relativePos / lineHeight) * lineHeight) - lineHeight;
            if (textRow => 0)
            {
                $('.highlight', this).css('top', textRow + 'px');
            }
        });
    }, function()
    {
        $('.highlight', this).hide();
    });
});
于 2012-08-16T20:39:12.257 に答える
0

SOに関する以前の投稿の回答と提案のほとんどは、各行にスパンまたはdivを追加してDOMを操作しようと試みたものです。しかし、特にモバイルブラウザではクロスブラウザ互換ではないため、これは実際には防水的なアプローチではありません。行の後ろにジャンプする動的にjqueryで制御されるdivを使用する必要があります。divは、マウスカーソルの位置に応じて行の高さでdivジャンプを計算するmousemoveでトリガーされるjquery関数を使用して動的に配置する必要があります

于 2012-08-16T20:35:48.530 に答える