Question

这就是我想要实现的目标：

滚动字幕内容（具有灵活的长度）可以从屏幕的右侧到左侧完成整个过程
一旦它从屏幕上消失，就会显示一些通用消息
在通用邮件的后台，检查是否有新的滚动内容并加载
仅当通用消息完成显示时，再次开始滚动（如果有新内容），否则重复通用消息

(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段落更改后重新设置宽度。

我该怎么做？

Answer 1

如果您使用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和帖子数据是jsfiddle返回html的方式）

我已使用$this.find('#scrollerText').text(response);，即使只有一个ID，$('#scrollerText').text(response);也没问题。如果您有多个帐单，则可以使用$this.find定位每个选取框的文本，因此如果您想要多个使用类而不是$this.find('.scrollerText').text(response);

jQuery重载功能

1 个答案: