1

ほとんどのマーキー スクリプトでは、マーキーが最後のアイテムに到達したときに (ul を使用して考えているため、最後のアイテムは最後の li です)、そのアイテムが画面から消えるまで待機するという事実が気に入らないため、私はマーキー スクリプトを作成しています。次に、ul の位置をリセットし、agian 全体のスクロールを開始します。

私のアプローチは、ul のクローンを作成し、それを現在の ul の後に追加してスクロールを開始し、完全に非表示になったら元の ul を削除することです。

これは、1 つのことを除いてほぼ完璧に機能します。関数を呼び出すと、setTimout に必要な時間が生成されます。この setTimout は、新しい UL を作成し、移動するように設定するために使用されます。

これは最初のループでは問題なく機能しますが、その後で問題が発生します。

説明するのは少し難しいですが、2 回目にタイムアウトを呼び出す必要があるようです。時間を待つのではなく、即座に自分自身を呼び出します。例については、http://webspirited.com/marquee.htmlを参照してください。

実際の例について。JavaScript コードは次のとおりです。

var count = 0;
$('document').ready(function () {
    //generate some random rows
    for (var i = 0; i <= 20; i++)
    $('.ulscroll').append('<li>Content ' + i + '</li>');
    //add one row so we can see its the last
    $('.ulscroll').append('<li>Last Item</li>');

    //set the ul's width
    var width = 0;
    $('.ulscroll').children('li').each(function () {
        width += $(this).outerWidth();
    });
    log('ul width: ' + width);
    $('.ulscroll').width(width);

    //activate the marquee              
    marquee('.ulscroll', 1, false);
});

function marquee(id, speed, sub) {
    //next two lines debugging purposes only
    count += 1;
    log('Marquee ran ' + count + ' times');

    //store copy of speed sent it(to pass for recursion)
    var s1 = speed;
    //set speed to 10*
    speed = speed * 10;

    //store parent width, and own width (if sub then add on width of parent div)
    var pwidth = $(id).parent('div').outerWidth();
    var width = (sub ? $(id).width() + pwidth : $(id).width());

    //set timeout
    var t = (width - pwidth) * speed;
    setTimeout(function () {
        var clone = $(id).clone().css('left', pwidth);
        $(id).addClass('oldul');
        $(id).after(clone);
        marquee(id + ':not(.oldul)', s1, true);
    }, t);

    $(id).animate({
        left: '-=' + width
    }, width * speed, 'linear', function () {
        $(this).remove();
    });
}

function log(text) {
    $('#log').append('<div>' + text + '</div>');
}

解決策
この問題は、:not(.ulold); でセレクターを渡すことによって発生しました。改訂された setTimeout は次のとおりです。

setTimeout(function(){
  var clone = $(id).clone().css('left', pwidth);
  $(id).addClass('oldul');
  var idx = id.split(':');
  idx = idx[0];
  log('idx: '+idx);
  $(idx).after(clone);
  marquee(idx+':not(.oldul)', s1, true);
},t);
4

2 に答える 2

0

問題は、おそらく、このコードにあります..

    var clone = $(id).clone().css('left', pwidth);
    $(id).addClass('oldul');

元のセレクターは時間の経過とともに多くのものに一致するため、セレクターを再利用しているという事実は物事を台無しにします..

最初の通話で使用marquee('.ulscroll:not(.oldul)', 1, false);

于 2010-10-19T14:16:30.627 に答える
0

Firebugなどの優れたデバッガーの使用方法を学びます。最終的に、アニメーション終了コールバック (セレクターに一致する要素を削除するもの) が匿名タイムアウト関数 (を呼び出すものmarquee) の前に呼び出されることがわかります。

サンプル ページのコードの問題 (ただし、投稿されたコードにはありません):toutの呼び出しごとにローカルですmarquee。clearTimeout(tout)呼び出しは何もしません。

最後に、マーキーは使用しないでください。使いやすさの問題があります。テキストを移動すると読みにくくなり、気を散らす原因となります。また、一部の読者にとっては常に動きが速すぎたり、遅すぎたりします。

于 2010-10-19T14:40:26.053 に答える