如何創建一個簡單，流暢的品牌？

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 marque。

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