Question

我使用

中建议的expample

Very Simple, Very Smooth, JavaScript Marquee

     (function($) {
    $.fn.textWidth = function(){
         var calc = '<span style="display:none">' + $(this).text() + '</span>';
         $('body').append(calc);
         var width = $('body').find('span:last').width();
         $('body').find('span:last').remove();
        return width;
    };

    $.fn.marquee = function(args) {
        var that = $(this);
        var textWidth = that.textWidth(),
            offset = that.width(),
            width = offset,
            css = {
                'text-indent' : that.css('text-indent'),
                'overflow' : that.css('overflow'),
                'white-space' : that.css('white-space')
            },
            marqueeCss = {
                'text-indent' : width,
                'overflow' : 'hidden',
                'white-space' : 'nowrap'
            },
            args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args),
            i = 0,
            stop = textWidth*-1,
            dfd = $.Deferred();

        function go() {
            if(!that.length) return dfd.reject();
            if(width == stop) {
                i++;
                if(i == args.count) {
                    that.css(css);
                    return dfd.resolve();
                }
                if(args.leftToRight) {
                    width = textWidth*-1;
                } else {
                    width = offset;
                }
            }
            that.css('text-indent', width + 'px');
            if(args.leftToRight) {
                width++;
            } else {
                width--;
            }
            setTimeout(go, args.speed);
        };
        if(args.leftToRight) {
            width = textWidth*-1;
            width++;
            stop = offset;
        } else {
            width--;            
        }
        that.css(marqueeCss);
        go();
        return dfd.promise();
    };
            $('h1').marquee();
})(jQuery);

但是当我将字体大小增加到100px时，文本会被剪裁。看到 http://jsfiddle.net/plunje/xYdBj/202/

有任何建议如何解决？

Answer 1

您未获得预期结果的原因是您的计算功能未返回您期望的结果。

这是因为：
创建的跨度是包装。要解决此问题，请添加css＆＃39; white-space：nowrap＆＃39;。而且因为跨度与H1相比具有不同的字体大小（您获取H1文本并将其放入跨度中，这不是H1字体大小）。

小提琴：http://jsfiddle.net/xYdBj/210/

这是一个更新的textWidth函数：

$.fn.textWidth = function(){
            var calc = '<span style="display:none; white-space: nowrap; font-size: '+$(this).css('font-size')+'">' + $(this).text() + '</span>';
             $('body').append(calc);
             var width = $('body').find('span:last').width();
             $('body').find('span:last').remove();
            return width;
        };

Answer 2

用

var width = $('body').find('span:last').width();

您获取当前文档大小但文本较大。我将文本放在div中，并将滚动宽度设为宽度http://jsfiddle.net/xYdBj/211/

var width = $('div')[0].scrollWidth;

我的例子增加了movepeed ...也许if（width == stop）永远不会是真的，但它只是一个例子。

Javascript选框文本被裁剪为大字体

2 个答案: