Question

我有一个歌曲标题的块元素（绝对定位的h1，最大宽度，nowrap和overflow：隐藏），需要限制为650px宽。如果H1的宽度是650px，我需要启动一个动画，水平地，来回地滚动div，以类似乒乓的方式。

我如何设置滚动动画？

Answer 1

我知道这不是解决这个问题的最有效或最好的方法，但我最终创建了两个jquery函数来完成任务：

$.fn.pingpongscroll = function () {
    var delay = 30;
    $(this).wrapInner('<span>');
    var contentWidth = $(this).children('span').width();
    var boxWidth = $(this).width();

    if (contentWidth > boxWidth) {
        var startIndent = parseInt($(this).css('text-indent'));
        var currIndent  = startIndent;
        var left = true;
        $(this).pingpongscrollstep(contentWidth, startIndent, currIndent, left, delay);
    }
};
$.fn.pingpongscrollstep = function (contentWidth, startIndent, currIndent, left, delay) {
    if($(this).length != 0) {
        thisdelay = delay;
        if(left) {
            if(contentWidth + currIndent > $(this).width()) {
                currIndent = currIndent - 1;
                $(this).css('text-indent', currIndent);
            } else {
                left = false;
                thisdelay = thisdelay*20;
            }
        } else {
            if(currIndent < startIndent) {
                currIndent = currIndent + 1;
                $(this).css('text-indent', currIndent);
            } else {
                left = true;
                thisdelay = thisdelay*30;
            }
        }
        var thiselement = this;
        setTimeout(function(){
            $(thiselement).pingpongscrollstep(contentWidth, startIndent, currIndent, left, delay);
        }, thisdelay);
    }
};

虽然这些都运行良好，但我确信这不是处理滚动的常用方法。另外，我不知道如何让第二个函数成为第一个函数的私有成员，所以它不能被网站调用...有谁知道怎么做？

Answer 2

有一个jquery选框插件

http://plugins.jquery.com/marquee/

Answer 3

我重构了code provided by Greg Schoppe以使用jQuery动画子系统。

我的版本和他的版本之间的时间有点不同，但这应该很容易调整。

(function( $ ) {
    $.fn.pingpongscroll = function () {
        $(this).wrapInner('<span style="white-space: nowrap">');
        var contentWidth = $(this).children('span').width();
        var boxWidth = $(this).width();

        if (contentWidth > boxWidth) {
            var startIndent = parseInt($(this).css('text-indent'));
            var currIndent  = startIndent;
            var left = true;

            var maxIndent = $(this).width() - contentWidth;
            pingpong($(this));

            function pingpong($el) {
                $el
                    .delay(2500)
                    .animate(
                        {'text-indent' : maxIndent},
                        5000,
                        'linear')
                    .delay(2500)
                    .animate(
                        {'text-indent' : startIndent},
                        5000,
                        'linear',
                        function() {
                            pingpong($el)
                        });
            }
        }
    };
})(jQuery);

带溢出的div的jquery marquee-like动画：hidden和nowrap？

3 个答案: