我目前正在开发一个网站,其中将包含一系列故事供人们阅读(基本上是博客)。我希望让它们尽可能易于阅读,并且我认为使用光标“突出显示”文本行会很有用。就像在阅读书籍时用手指跟随文本行一样。
我偶然发现了这个答案,但我似乎无法使其在我的页面上正常工作。而且这是一个相当古老的答案,也许有改进版本?
如果有人能帮助我,我将永远感激!
我偶然发现了这个答案,但我似乎无法使其在我的页面上正常工作。而且这是一个相当古老的答案,也许有改进版本?
如果有人能帮助我,我将永远感激!
我写了一些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();
});
});
你所提到的旧帖子中大多数答案和建议都试图通过为每行添加span或div来操作DOM。但这实际上不是一种可靠的方法,因为它在跨浏览器兼容性方面存在问题,特别是在移动浏览器上。你应该使用一个动态的、由jQuery控制的div,它会跳到行后面。这个div应该是动态定位的,可以通过一个在mousemove事件上触发的jQuery函数来计算div跳跃的行高,具体取决于鼠标指针的位置。