Question

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

[问题]：＆lt; Text in div - automated scrolling with jQuery - jsFiddle inside＆gt;

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

所以就像引用的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/

div中的自动滚动文本

1 个答案: