1

私はすでに投稿されたスタックの質問を見ました：

[質問]: < div 内のテキスト - jQuery による自動スクロール - 内部の jsFiddle >

これに追加する私の質問は、各段落のテキストまたは分割された div を強調表示 (太字、背景色など) することは可能ですか? ?

参照されている jsfiddle のように、内部に 4,5,6,... div または p を持つ div コンテナーがあり、1 つの 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>

そして、必要に応じて含まれる div の幅/高さを設定するためのいくつかの CSS。また、「薄暗い」段落と「強調表示された」段落のいくつかのクラスを想定しています。

おそらくこれを行うためのよりクリーンな方法がありますが、これは私がまとめたものであり、うまくいくようです...

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 に答える