Question

我的网站上有一个文字，在页面中横向滚动。我试图用黑色突出显示8个字符，而其余字符是灰色的。但是滚动时这些字符会有所不同，突出显示的位应保持不变。

如果这没有任何意义，如果灰色是x，它应该看起来像这样：

xxxxx xpsum dolox xxx xxxx
xxxx xxsum dolox sxx xxxx
xxx xxxum dolox six xxxx x
xx xxxxm dolox坐xxxx xx

我正在尝试在jQuery中完成此操作，但我无法让它工作。我还想说我不是网页设计方面的专家，所以我不知道自己在做什么。无论如何，我尝试了两种不同的方法，一种是说“在越过底层div时改变文本的颜色”。另一种方法是根据滚动位置更改文本的颜色，但问题是它需要整个div的滚动位置，而不是页面上的固定位置。两者目前都不起作用，例子如下：

jsfiddle 9p29tz2f jsfiddle 9p29tz2f/1

如果有人有任何想法如何解决这个问题，或需要更多澄清，请告诉我。非常感谢！

Answer 1

我已经采用了Teemu的解决方案并进行了一些修改：http://jsfiddle.net/9af91wcL/2/

重要部分：代码在文本顶部移动白色DIV（#grey-overlay）并使其透明。通过添加黑白像素，您会变灰。灰度级由alpha通道确定（rgba()函数中的0.7）。

你需要指定一个高度，否则它会看起来很奇怪。我使用1.5em确保它不与#bodytext div的滚动条重叠。

同时确保两个div的顶部/左侧位置相同。

在您的真实代码中，您可以使水平滚动条消失并使用JavaScript滚动。

HTML

<div id="grey-overlay"></div>
<div id="bodytext">text...</div>

CSS

body {
    background: #ffffff;
    color: #000000;
    font-family: sans-serif;
    font-size: 200%;
}
#bodytext {
    top: 15%;
    width:200px;
    height: 2em;
    padding: 0;
    position:absolute;
    overflow-x:scroll;
    overflow-y:hidden;
    white-space: nowrap;
}

#grey-overlay {
    background-color: rgba(255, 255, 255, 0.7);
    width:40px;
    height: 1.5em;
    top:15%;
    position:fixed;
    z-index: 10;
}

Answer 2

您需要在#black中显示与#bodytext中相同的内容，并同步其相对于#bodytext滚动的位置。这可以通过在#black周围使用额外的包装来实现。像这样：

CSS：

#cover {
    top: 15%;
    height:50%;
    width: 120px;
    padding: 0;
    position:fixed;
    overflow-x: hidden;
    background-color: #D8D8D8;
}
#black {
    color: #000000;
    width:100%;
    height:100%;
    top:0px;
    left: 0px;
    position:absolute;
    white-space: nowrap;
    z-index: 10;
}
#bodytext {
    top: 15%;
    width:100%;
    height:85%;
    padding: 0;
    position:absolute;
    overflow-x:scroll;
    white-space: nowrap;
    color: #D8D8D8;
}

HTML：

<div id="cover">
    <div id="black"></div>
</div>

JS：

$(document).ready(function () {
    var black = $('#black'),
        btext = $('#bodytext');
    black.text(btext.text()); // Clone the content
    btext.scroll(function () {
        var pos = btext.scrollLeft();
        black.css('left', -pos + 'px'); // Set the position to match #bodytext
    });
});

A live demo at jsFiddle

请注意，如果您需要some left margin，则还必须“计算”到pos。

Answer 3

克隆文本并将其设置为叠加框的子项，然后将它们一起滚动：

$(function(){
    var $bodytext = $('#bodytext'),
        $clone = $bodytext.clone();         
    //copy the text and append it to #black:
    $clone.attr("id","clone").prependTo("#black");
    //scroll #clone with #bodytext:
    $bodytext.scroll(function(){
        $clone.scrollLeft($bodytext.scrollLeft());
    });
});

http://jsfiddle.net/9p29tz2f/2/

根据页面位置突出显示文本中的字符

3 个答案: