我目前正在研究一個網站,該網站將包含大量供人閱讀的故事(基本上是一個博客)。我想讓它們儘可能容易閱讀,並且我認爲使用光標「突出顯示」文本行會很有用。有點像在閱讀書籍時用手指跟着文字的線條。在鼠標懸停上突出顯示文本行
我偶然發現this answer,但我似乎無法讓它爲我的網頁工作。這也是一個非常古老的答案,所以也許這是一個改進版本?
如果有人能幫助我,我會永遠感激!
我目前正在研究一個網站,該網站將包含大量供人閱讀的故事(基本上是一個博客)。我想讓它們儘可能容易閱讀,並且我認爲使用光標「突出顯示」文本行會很有用。有點像在閱讀書籍時用手指跟着文字的線條。在鼠標懸停上突出顯示文本行
我偶然發現this answer,但我似乎無法讓它爲我的網頁工作。這也是一個非常古老的答案,所以也許這是一個改進版本?
如果有人能幫助我,我會永遠感激!
寫了一些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();
});
});
大多數關於SO的舊帖子中的答案和建議你都試圖通過爲每行添加跨度或div來操縱DOM。但實際上這不是一種防水的方法,因爲它不是跨瀏覽器兼容的,尤其是不適用於移動瀏覽器。你應該使用一個動態的jquery控制的div跳轉後面的行。該div應該動態定位,並帶有一個在mousemove上觸發的jquery函數,根據鼠標光標位置計算行高的div跳轉。
jsbin上的例子看起來非常有效。你可以發佈你的代碼,以便我們可以看到爲什麼它不起作用? – PJH 2012-08-16 20:15:13
更新:添加它。它應該只用於網站左側的文章(所以不是滑塊)。 http://www.s-hosting.nl/creepypastaindex/ – Swen 2012-08-16 20:18:45