javascript - div中的自动滚动文本

Question

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

[问题]:< Text in div - automated scrolling with jQuery - jsFiddle inside >

我的问题是，是否可以让每个段落中的文本或分隔的 div 在主视图中突出显示(粗体、背景颜色等)，同时 p 或 div 离开/进入 slider 盒子褪色了吗？

所以就像引用的 jsfiddle 一样，你有一个 div 容器，里面有 4、5、6、... div 或 p，一个 div 或 p 是可见的，而它上方和下方的 div 或 p 则只有一半将是可见的(褪色)，而剩余的溢出是隐藏的。

谢谢。

Answer 1

如果我没理解错的话，您正在寻找这样的效果:

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/