Бегущая строка на сайте, а-ля бегущая строка CNN =

[Everybody]

Скрипт бегущей строки новостей

Если Вы хотите разместить на своем сайте эффектную бегущую строку с новостями, которые будут подгружаться время от времени, то этот скрипт, то, что надо. Разумеется, бегущие заголовки новостей одновременно являются ссылками, а для того, что бы приостановить поток данных, требуется, только навести на строку курсор.
Разработчики так и назвали своё детище – бегущая строка CNN
код размещения:

Код Выделить Развернуть

<ul id="ticker01"> <br>    <li><span>10/10/2007</span><a href="#">The first thing ...</a></li> <br>    <li><span>10/10/2007</span><a href="#">End up doing is ...</a></li> <br>    <li><span>10/10/2007</span><a href="#">The code that you ...</a></li> <br>    <!-- eccetera --> <br></ul>
Исходник:

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 = 0;
  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.find("li").each(function(i){
  stripWidth += jQuery(this, i).width();
  });
  $strip.width(stripWidth); 
  var defTiming = stripWidth/settings.travelocity;
  var totalTravel = stripWidth+containerWidth;       
  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);
  }); 
 });
};

Ready? liScroll()

Спойлер

Once you're done with your markup, simply call liScroll() like that:

Код Выделить Развернуть

$(function(){ <br>    $("ul#ticker01").liScroll(); <br>});
If you want your list to scroll faster or slower than the default value, modify the travelocity param

Код Выделить Развернуть

$(function(){ <br>    $("ul#ticker02").liScroll({travelocity: 0.15}); <br>});

[свернуть]

... and enjoy!