1

我看到已经发布了一个堆栈问题：

[问题]：< div 中的文本 - 使用 jQuery 自动滚动 - 里面的 jsFiddle >

我补充的问题是，是否可以在每个段落中的文本或分隔的 div 突出显示（粗体、背景颜色等）一旦它们在主视图中，而 p 或 div 离开/进入滑块框是褪色的?

因此，就像引用的 jsfiddle 一样，您有一个 div 容器，其中包含 4、5、6、... div 或 p，一个 div 或 p 可见，而其上方和下方的 div 或 p 则只有一半可见（褪色），而剩余的溢出被隐藏。

谢谢。

4

1 回答 1

3

如果我理解正确，您正在寻找这样的效果：

http://jsfiddle.net/2RRWS/

我的代码采用 html 结构，如：

<div id="scrollContainer">
   <p>Some text</p>
   <p>More text</p>
   ...
</div>

和一些 CSS 来适当地设置包含 div 的宽度/高度。它还为“变暗”和“突出显示”段落假设了一些类。

可能有一种更清洁的方法可以做到这一点，但这只是我拼凑起来的，它似乎有效，所以......

var $container = $("#scrollContainer"),
    $ps = $container.find("p"),
    containerHeight = $container.height(),
    contentHeight = 0,
    scrollTop = 0;

// figure out the height of the content
$ps.each(function() {
    contentHeight += $(this).outerHeight();
});

// add some blank space at the beginning and end of the content so that it can
// scroll in from the bottom
$("<div></div>").css("height", 400).appendTo($container).clone().prependTo($container);

setInterval(function() {
    if (paused)
        return;
    // if we've gone off the end start again
    if (scrollTop > contentHeight + containerHeight)
        scrollTop = 0;
    // scroll up slightly
    $container.scrollTop(scrollTop++);

    $ps.removeClass("highlighted")   // for each paragraph...
       .addClass("dimmed")           // dim it
       .each(function() {            // unless it is in view
           var $this = $(this),
               top = $this.position().top,
               height = $this.height();
           if (top > 0 && top + height < containerHeight)
                    $(this).addClass("highlighted").removeClass("dimmed");
    });
}, 20);

$container.hover(function() {
    paused = true;
}, function() {
    paused = false;
});

编辑：更新以根据评论实现“暂停”功能。http://jsfiddle.net/2RRWS/8/

于 2012-11-24T08:49:35.573 回答