无限选取框JS从左到右无间隙

时间:2018-08-29 10:00:28

标签: javascript jquery

我正在尝试创建一个无限选取框,并且到目前为止http://jsfiddle.net/zrW5q/2737/

首先;如何使文本字幕从浏览器的左侧而不是右侧开始?

第二;如何停止屏幕上的缝隙?目前,选取框会在h1文本的结尾处重置,但是我希望h1文本的开头从屏幕左侧消失时从右侧开始

最后;如何使隐藏的文本不会在悬停时显示?文本在悬停时停止,但我希望隐藏的文本保持隐藏状态,当前隐藏的文本在悬停时显示

JS

 (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.css('overflow')!="hidden") { 
                that.css('text-indent', width + 'px'); 
                return false;
            }
            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();
$("h1").marquee();
$("h1").mouseover(function () {     
    $(this).removeAttr("style");
}).mouseout(function () {
    $(this).marquee();
});
})(jQuery);

任何帮助将不胜感激,谢谢您的宝贵时间

0 个答案:

没有答案