1

独自のカスタム js-text-scroller を作成しようとしています (テキストを div 内で左にスクロールしてから、スクロールを何度も繰り返したい)。

しかし、私はいくつかの問題を抱えています。どこが間違っているのか、どこに新しい機能が必要なのか、本当に指を置くことはできません。私が得ることができるすべての助けは大歓迎です。

フィドルの例を次に示します: http://jsfiddle.net/Na373/

HTML:

<div class="wrap">
   <div class="scroll">
       <ul class="active">
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
           <li>Hello World</li>
       </ul>
   </div>

JS:

$ul = $('.scroll ul');
//copys the existing ul and appends it after the existing one
$('.scroll').append($ul.clone().removeClass().addClass('not_active'));

function scroll() {
    $active = $('.scroll ul.active');

    $active.each(function() {
        $not_active = $('.scroll ul.not_active');

        // foreach time the function runs the ul goes "left: -1px;"
        var current_position = parseInt($(this).css('left'));
        var new_position = current_position - 1;
        $(this).css('left', new_position+'px');

        var parent_width = $(this).parent().outerWidth(); // gets the width of ".scroll"
        var width = $(this).outerWidth(); // gets the width of the "ul"
        var shown_all = current_position + width;

        // if the right corner of the "ul" are att the right corner of ".scroll"
        // this if statement executes and adds new existing class on the "ul.not_active"
        // and adds class ".active" instead
        // this means that there are 2 ul with the class active 
        //running simultaneously
        if (shown_all == parent_width) {
            $not_active.removeClass().addClass('active');
        }

        // here it checks if the "ul.active" have past its own length to left
        // Here im trying to make it "not_active" and put it after the existing ".active"
        //
        // <ul class="active">....</ul> ----> <ul class="not_active">...</ul>
        //
        // then put it after the other "ul.active"
        //
        //            <ul class="active
        // ---------> <ul class="not_active"></ul>
        //
        // So it all beginns from the beginning
        if (current_position == '-'+width) {
            $(this).removeClass().addClass('not_active').css('left', '0');
            $(this).insertAfter($('.scroll ul').next());
        }
    });
};
// And here I run the function
setInterval(scroll, 10);

CSS:

.wrap {  
    position: relative;
    padding: 10px 10px 10px;
    height: 18px;
    background: #000;
    color: #fff;
    overflow: hidden;
    width: 500px;
}
.scroll {
   width: 500px;
   white-space: nowrap;
}
.scroll ul {
    left: 0;
    position: relative;
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
}
.scroll ul li {
    padding: 0;
    margin: 0;
    display: inline;
}
4

2 に答える 2

1

あなたの問題は、次のifステートメントの条件だと思います

if (shown_all == parent_width) {

私が知る限り、は 0 + ul の幅で始まり、0 で終わることを意味shown_all = current_position + widthします。現在のコードでは、if ステートメントは真になりません。shown_all

if ステートメントを にif (shown_all == 0)変更するか、変数の設定方法をに変更すると、より良い結果が得shown_allられるvar shown_all = -current_position + width;と思います。

于 2013-02-26T15:11:32.457 に答える
0

ここで実際の例を取得しました： http://jsfiddle.net/s8TnL/

すべての応答は大歓迎です。性能や機能性に関しては喜んで対応してくれます。

HTML:

<div class="wrap">
<div class="scroll">
    <ul class="active">
        <li>Hello World</li>
        <li>Hello World</li>
        <li>Hello World</li>
        <li>Hello World</li>
        <li>Hello World</li>
        <li>Hello World</li>
        <li>Hello World</li>
    </ul>
</div>

CSS:

.wrap {
    position: relative;
    padding: 10px 10px 10px;
    height: 18px;
    background: #0BF397;
    color: #fff;
    overflow: hidden;
    width: 500px
}
.scroll {
    display: block;
    white-space: nowrap;
}
.scroll ul {
    position: relative;
    margin: 0;
    padding: 0;
    display: inline;
    list-style: none;
}
.scroll ul li {
    padding: 0;
    margin: 0;
    display: inline;
}

JS:

$ul = $('.scroll ul');
$('.scroll').append($ul.clone().removeClass().addClass('not_active'));

$ul.hover(function () {
    clearInterval(activate);
}, function () {
    activate = setInterval(scroll, 10);
});

function scroll() {
    $active = $('.scroll ul.active');

    $active.each(function () {
        $not_active = $('.scroll ul.not_active');
        var offset = $(this).offset();

        var current_position = offset.left;
        var new_position = current_position - 1;
        $(this).offset({
            left: new_position
        });

        var parent_width = $(this).parent().outerWidth();
        var width = $(this).outerWidth();

        var shown_all = current_position + width;

        if (shown_all == parent_width) {
            $not_active.removeClass().addClass('active').offset({
                left: parent_width
            });
        }

        if (current_position == '-' + width) {
            $(this).removeClass().addClass('not_active');
        }
    });
};

activate = setInterval(scroll, 10);
于 2013-02-27T20:34:45.393 に答える