これが私が達成しようとしていることです:
- スクロール マーキー コンテンツ (可変長) は、画面の右から左への完全な移動を行います
- 画面から消えたら、いくつかの一般的なメッセージを表示します
- 一般的なメッセージのバックグラウンドで、新しいスクロール コンテンツを確認してロードします。
- 一般的なメッセージの表示が終了した場合にのみ、再びスクロールを開始し (新しいコンテンツがある場合)、それ以外の場合は一般的なメッセージを繰り返します。
(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 段落が変更された後の幅の再設定を含め、関数全体を再実行することです。
どうすればいいですか?