/*! * liScroll 1.0 * Examples and documentation at: * http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html * 2007-2010 Gian Carlo Mingati * Version: 1.0.2.1 (22-APRIL-2011) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * Requires: * jQuery v1.2.x or later * */ 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); }); }); }; $(function(){ $("ul#ticker01").liScroll({travelocity: 0.15}); });
<ul id="ticker01"> <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>
/* liScroll styles */ .tickercontainer { /* the outer div with the black border */ border: 1px solid #000; background: #fff; height: 27px; margin: 0; padding: 0; overflow: hidden; } .tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */ position: relative; left: 10px; top: 8px; overflow: hidden; } ul.newsticker { /* that's your list */ position: relative; left: 750px; font: bold 10px Verdana; list-style-type: none; margin: 0; padding: 0; } ul.newsticker li { float: left; /* important: display inline gives incorrect results when you check for elem's width */ margin: 0; padding: 0; background: #fff; } ul.newsticker a { white-space: nowrap; padding: 0; color: #ff0000; font: bold 10px Verdana; margin: 0 50px 0 0; } ul.newsticker span { margin: 0 10px 0 0; }