Невозможно изменить направление бегущей строке

Question

Я пытаюсь использовать следующую библиотеку:

liScroll (а JQuery News Ticker стало проще) 1,0 (Demo)

Я положил его на моем сайте, и это работает отлично, но только с направлением RTL, проблема заключается в том, что я не могу ее изменить, чтобы прокручивать слева направо. Я попытался изменить файл JavaScript, но он не работает. Вот мой код:

jQuery.fn.liScroll = function(settings) { 
    settings = jQuery.extend({ 
    travelocity: 0.07 
    }, settings);  
    return this.each(function(){ 
      var $strip = jQuery(this); 
      $strip.addClass("newsticker") 
      var stripWidth = 1; 
      $strip.find("li").each(function(i){ 
      stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi 
      }); 
      var $mask = $strip.wrap("<div class='mask'></div>"); 
      var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");        
      var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width 
      $strip.width(stripWidth);   
      var totalTravel = stripWidth+containerWidth; 
      var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye  
      function scrollnews(spazio, tempo){ 
      $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);}); 
      } 
      scrollnews(totalTravel, defTiming);    
      $strip.hover(function(){ 
      jQuery(this).stop(); 
      }, 
      function(){ 
      var offset = jQuery(this).offset(); 
      var residualSpace = offset.left + stripWidth; 
      var residualTime = residualSpace/settings.travelocity; 
      scrollnews(residualSpace, residualTime); 
      });   
    });}; 

Может быть, мне также нужно изменить код CSS?

Answer 1

Я думаю, что я получил это:

jQuery.fn.liScroll2 = function(settings) { 
     settings = jQuery.extend({ 
     travelocity: 0.07 
     }, settings);  
     return this.each(function(){ 
       var $strip = jQuery(this); 
       $strip.addClass("newsticker") 
       var stripWidth = 1; 
       $strip.find("li").each(function(i){ 
       stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi 
       }); 
       var $mask = $strip.wrap("<div class='mask'></div>"); 
       var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");        
       var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width 
      $strip.css("left", -containerWidth); 
       $strip.width(stripWidth);   
       var totalTravel = stripWidth+containerWidth; 
       var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye  
       function scrollnews(spazio, tempo){ 
       $strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", -containerWidth); scrollnews(totalTravel * -1, defTiming);}); 
       } 
       scrollnews(totalTravel, defTiming);    
       $strip.hover(function(){ 
       jQuery(this).stop(); 
       }, 
       function(){ 
       var offset = jQuery(this).offset(); 
       var residualSpace = offset.left + stripWidth; 
       var residualTime = residualSpace/settings.travelocity; 
       scrollnews(residualSpace * -1, residualTime); 
       });   
     }); 
}; 

я должен был изменить исходное положение полосы отрицательного значения и умножить totalTravel на -1.

Смотрите пример здесь: http://jsfiddle.net/9Tkj2/2/

Answer 2

Демо: here

Обновление HTML следующим образом:

<ul id="ticker01" style="left: -700px"> 
    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li> 
    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li> 
    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li> 
    <!-- eccetera --> 
</ul> 

И JS, как так:

jQuery.fn.liScroll = function(settings) { 
    settings = jQuery.extend({ 
     travelocity: 0.07 
    }, settings); 
    return this.each(function() { 
     var $strip = jQuery(this); 
     $strip.addClass("newsticker") 
     var stripWidth = 1; 
     $strip.find("li").each(function(i) { 
      stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar and Fabien Volpi 
     }); 
     var $mask = $strip.wrap("<div class='mask'></div>"); 
     var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>"); 
     var containerWidth = $strip.parent().parent().width(); //a.k.a. 'mask' width 
     $strip.width(stripWidth); 
     var totalTravel = stripWidth + containerWidth; 
     var defTiming = totalTravel/settings.travelocity; // thanks to Scott Waye 

     function scrollnews(spazio, tempo) { 
      $strip.animate({ 
       left: '+=' + spazio 
      }, tempo, "linear", function() { 
       $strip.css("left", -stripWidth); 
       scrollnews(totalTravel, defTiming); 
      }); 
     } 
     scrollnews(totalTravel, defTiming); 
     $strip.hover(function() { 
       jQuery(this).stop(); 
      }, 
      function() { 
       var offset = jQuery(this).offset(); 
       var residualSpace = offset.left + stripWidth; 
       var residualTime = residualSpace/settings.travelocity; 
       scrollnews(residualSpace, residualTime); 
      }); 
    }); 
}; 

Demo: here