Question

首先我有一个html品牌：

<marquee behavior="scroll" direction="left" scrollamount="1">

但它不顺畅，而且太慢了卷轴越高 - 平滑度越低。

然后我尝试用css

marquee{
  width: 200px; height: 50px; white-space: nowrap;
  overflow: hidden;
  overflow-x:-webkit-marquee;
  -webkit-marquee-direction: forwards;
  -webkit-marquee-style: scroll;
  -webkit-marquee-speed: normal; //I changed this to `slow` - without effect
  -webkit-marquee-increment: small;
  .-webkit-marquee-repetition: 5;
  overflow-x: marquee-line;
  marquee-direction: forward;
  marquee-style: scroll;
  marquee-speed: normal;  //I changed this to `slow` - without effect
}

我想，如果我可以将速度改为slow，上述品牌将会很顺利所以，我想要一个simple，smooth和speed-adjustable品牌。

Answer 1

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

的 DEMO

如何打造简单，流畅的品牌？

1 个答案: