Javascript Marquee текст обрезается для больших размеров шрифтов

Question

Javascript Marquee текст обрезается для больших размеров шрифтов

0

Я использую предложенный пример

Очень простой, очень гладкий, JavaScript-интервал

     (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);

Но когда я увеличиваю размер шрифта до 100 пикселей, текст обрезается. См. Http://jsfiddle.net/plunje/xYdBj/202/

Любые предложения, как исправить?

user1119308 20 март 2014, в 16:13

Источник

Теги:

javascript

jquery

html

css3

2 ответа

1

С

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

вы получаете размер текущего документа, но ваш текст больше. Я помещаю текст в div и получаю ширину прокрутки как ширину http://jsfiddle.net/xYdBj/211/

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

мой пример увеличил скорость перемещения... может быть, если (width == stop) никогда не будет правдой, а будет просто примером.

Ra Mon 20 март 2014, в 14:01

Ещё вопросы

2pha · Accepted Answer · 2014-03-20T13-05-00.000Z

Причина, по которой вы не получаете ожидаемых результатов, заключается в том, что ваша функция вычисления не возвращает ожидаемого результата.

Это потому что:
Созданный промежуток - это упаковка. Чтобы исправить это, добавьте css 'white-space: nowrap'. А также потому, что диапазон имеет разный размер шрифта по сравнению с 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;
        };