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和post数据是jsfiddle返回html的方式）

$this.find('#scrollerText').text(response);即使应该只有一个 id，我也使用过并且$('#scrollerText').text(response);会很好。如果您有多个选取框，您将使用 定位每个选取框的文本$this.find，因此如果您想要多个使用类而不是$this.find('.scrollerText').text(response);

于 2013-11-02T17:30:57.983 回答