div的自动滚动文本 [英] automated scrolling text in div's

问题描述

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

i saw a stack question posted already:

[问题]:< div中的文本-使用jQuery自动滚动-内部jsFiddle >

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

我要补充的问题是，是否有可能在主视图中使每个段落或单独的div中的文本突出显示(粗体，背景颜色等)，而p或div离开/进入滑块框褪了色?

My question adding to this is, is it possible to have the text in each paragraph or separated divs highlighted (boldness, background color, etc.) once they are in main view, whilst the p's or div's leaving/entering the slider box are faded?

因此，就像引用的jsfiddle一样，您有一个div容器，其中包含4,5,6，... div或p，并且其中一个div或p可见，而div或p上下的只有一半将可见(褪色)，而其余的溢出被隐藏.

So like the jsfiddle referenced, you have a div container with say 4,5,6,... div's or p's inside of it and one div or p is visible whilst the div or p above and below it, only half would be visible (faded), whilst the remaining overflow is hidden.

谢谢.

推荐答案

如果我对您的理解正确，那么您正在寻找这样的效果:

If I understand you correctly, you're looking for an effect like this:

http://jsfiddle.net/2RRWS/

我的代码采用类似html的结构:

My code assumes an html structure like:

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

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

And some CSS to set the width/height of the containing div as appropriate. Also it assumes some classes for "dimmed" and "highlighted" paragraphs.

可能有一种更清洁的方式来执行此操作，但这只是我拼凑而成的，而且似乎可行，所以...

There's probably a cleaner way to do this, but this is just what I cobbled together and it seems to work, so...

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/

Updated to implement "pause" feature as per comment. http://jsfiddle.net/2RRWS/8/

这篇关于div的自动滚动文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！