Beiträge von Miratalu

Was mir allerdings nicht gefällt, ist die Lücke zwischen Ende und Anfang.
Ich würde das gerne ohne Unterbrechung "endlos" laufen lassen.
Kann mir vielleicht jemand sagen, was ich da am Code ändern muss?
Vielen Dank!

HTML
<div class="holder">
  <ul id="ticker01">
                            <li><span>10/10/2007</span><a href="#">The first thing that most Javascript programmers</a></li>
                            <li><span>10/10/2007</span><a href="#">End up doing is adding some code</a></li>
                            <li><span>10/10/2007</span><a href="#">The code that you want to run</a></li>
                            <li><span>08/10/2007</span><a href="#">Inside of which is the code that you want to run</a></li>
                            <li><span>08/10/2007</span><a href="#">Right when the page is loaded</a></li>
                            <li><span>05/10/2007</span><a href="#">Problematically, however, the Javascript code</a></li>
                            <li><span>04/10/2007</span><a href="#">The first thing that most Javascript programmers</a></li>
                            <li><span>04/10/2007</span><a href="#">End up doing is adding some code</a></li>
                            <li><span>04/10/2007</span><a href="#">The code that you want to run</a></li>
                            <li><span>03/10/2007</span><a href="#">Inside of which is the code that you want to run</a></li>
                            <li><span>03/10/2007</span><a href="#">Right when the page is loaded</a></li>
                            <li><span>01/10/2007</span><a href="#">Problematically, however, the Javascript code</a></li>
                </ul>
</div>


CSS
.holder { 
  background-color:#ccc;
  width:300px;
  height:250px;
  overflow:hidden;
  padding:10px;
  font-family:Helvetica;
}
.holder .mask {
  position: relative;
  left: 0px;
  top: 10px;
  width:300px;
  height:240px;
  overflow: hidden;
}
.holder ul {
  list-style:none;
  margin:0;
  padding:0;
  position: relative;
}
.holder ul li {
  padding:10px 0px;
}
.holder ul li a {
  color:darkred;
  text-decoration:none;
}


JS

jQuery.fn.liScroll = function(settings) {
    settings = jQuery.extend({
        travelocity: 0.03
        }, settings);        
        return this.each(function(){
                var $strip = jQuery(this);
                $strip.addClass("newsticker")
                var stripHeight = 1;
                $strip.find("li").each(function(i){
                    stripHeight += jQuery(this, i).outerHeight(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 containerHeight = $strip.parent().parent().height();    //a.k.a. 'mask' width     
                $strip.height(stripHeight);            
                var totalTravel = stripHeight;
                var defTiming = totalTravel/settings.travelocity;    // thanks to Scott Waye        
                function scrollnews(spazio, tempo){
                $strip.animate({top: '-='+ spazio}, tempo, "linear", function(){$strip.css("top", containerHeight); scrollnews(totalTravel, defTiming);});
                }
                scrollnews(totalTravel, defTiming);                
                $strip.hover(function(){
                jQuery(this).stop();
                },
                function(){
                var offset = jQuery(this).offset();
                var residualSpace = offset.top + stripHeight;
                var residualTime = residualSpace/settings.travelocity;
                scrollnews(residualSpace, residualTime);
                });            
        });    
};

$(function(){
    $("ul#ticker01").liScroll();
});