0

これが私が達成しようとしていることです：

  • スクロール マーキー コンテンツ (可変長) は、画面の右から左への完全な移動を行います
  • 画面から消えたら、いくつかの一般的なメッセージを表示します
  • 一般的なメッセージのバックグラウンドで、新しいスクロール コンテンツを確認してロードします。
  • 一般的なメッセージの表示が終了した場合にのみ、再びスクロールを開始し (新しいコンテンツがある場合)、それ以外の場合は一般的なメッセージを繰り返します。

http://jsfiddle.net/Vbmm5/

(function($) {
    $.fn.marquee = function(options) {
        return this.each(function() {
            var o = $.extend({}, $.fn.marquee.defaults, options),
                $this = $(this),
                $marqueeWrapper,
                containerWidth,
                animationCss,
                elWidth;
            o = $.extend({}, o, $this.data());
            o.gap = o.duplicated ? o.gap : 0;
            $this.wrapInner('<div class="js-marquee"></div>');
            var $el = $this.find('.js-marquee').css({
                'margin-right': o.gap, 
                'float':'left'
            });
            if(o.duplicated) {
                $el.clone().appendTo($this);
            }
            $this.wrapInner('<div style="width:100000px" class="js-marquee-wrapper"></div>');
            elWidth = $this.find('.js-marquee:first').width() + o.gap;
            $marqueeWrapper = $this.find('.js-marquee-wrapper');
            containerWidth = $this.width();
            o.speed = ((parseInt(elWidth,10) + parseInt(containerWidth,10)) / parseInt(containerWidth,10)) * o.speed;
            var animate = function() {
                if(!o.duplicated) {
                    $marqueeWrapper.css('margin-left', o.direction == 'left' ? containerWidth : '-' + elWidth + 'px');
                    animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : containerWidth };
                }
                else {
                    $marqueeWrapper.css('margin-left', o.direction == 'left' ? 0 : '-' + elWidth + 'px');
                    animationCss = { 'margin-left': o.direction == 'left' ? '-' + elWidth + 'px' : 0 };
                }
                $marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
                    getUpdates();
                });
            };
            setTimeout(animate, o.delayBeforeStart);
        });
    };
})(jQuery);

$(function(){
    $('#scrollerContent').marquee({
        speed: 3000,
        gap: 50,
        delayBeforeStart: 0,
        direction: 'right',
        duplicated: false,
        pauseOnHover: false,
    });
});

function getUpdates()
{
    alert("Hello"); // This is where the jQuery get function would be to update the text
    alert("Show Details"); // This is where the generic details would be displayed
    marquee();
}

問題は、スクロール要素が幅を必要とすることです。これは、メッセージの新しい「ロード」ごとに明らかに変化します。getUpdates() 関数をメインの jQuery 関数内に配置しようとしましたが、これはほぼ完全に機能しますが、containerWidth 変数を更新しないため、元のメッセージよりも長いメッセージが途中で開始され、短いメッセージが表示されるまでに時間がかかります。

必要なのは、 #scrollerText 段落が変更された後の幅の再設定を含め、関数全体を再実行することです。

どうすればいいですか？

4

1 に答える 1

0

console.log()代わりに使用した場合alert()は、コンソールを開いて見たでしょう

Uncaught ReferenceError: marquee is not defined

存在しないgetUpdates()関数を呼び出しています。marquee();スクリプトはそこで終了します。

いくつかの手順に戻り (削除したものを元に戻す)、コードがアニメーションをトリガーする場所に戻り、その前にテキストを更新するコードを追加するか、データを取得している場合はそのコードをラップする必要があります。

したがって、サーバーからデータを取得している場合、theurl.php は新しいテキストのみを返します。アニメーションをトリガーするコードを $.get コールバック関数内に移動します。

http://jsfiddle.net/Vbmm5/4/

$marqueeWrapper.animate(animationCss, o.speed , 'linear', function(){
    // clear the text to prevent it from hanging at the end of the 
    // marquee while the script gets new data from the server 
    $this.find('#scrollerText').text('');
    // get new text
    $.get('theurl.php', function(response){
        $this.find('#scrollerText').text(response);
        // update the width
        elWidth = $this.find('.js-marquee:first').width(); 
        //fire event
        $this.trigger('finished');
        //animate again
        if(o.pauseOnCycle) {
            setTimeout(animate, o.delayBeforeStart);
        }
        else {
            animate();
        }
    });
});

(jsfiddle の例の URL と投稿データは、html を返す jsfiddle の方法です)

$this.find('#scrollerText').text(response);IDは1つしかなくても問題ありませんが、使用しまし$('#scrollerText').text(response);た。複数のマーキーが必要な場合は、 を使用して各マーキーのテキストをターゲットにします$this.find。そのため、複数のマーキーが必要な場合は、代わりにクラスを使用します$this.find('.scrollerText').text(response);

于 2013-11-02T17:30:57.983 に答える