Question

我已经实施了一个横向自动收录器，但是，它应该循环通过<li>并永不停止。我似乎在某个地方出现了错误，并且在<li>的结尾处留下了一个不应该发生的黑色空间，它应该继续环。我在这里犯了什么错误，这使得它无法无限地工作？

/* Horizontal Ticker */
jQuery.fn.racScroll = 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);
                });         
        }); 
};

    jQuery(function ($) {
    $("ul#feed").racScroll({travelocity: 0.05});
    });

Answer 1

这是由以下css引起的：

  margin-right: -15px;

Answer 2

ul#feed li:last-of-type { margin-right:0; }应该可以解决您的问题。

Answer 3

这是一个有效的解决方案。我建议添加以下内容：

ul#feed li:last-child {
  padding-right: 30px;
}

这样做是将最后一个列表元素推送30px，以克服“ul＃feed li”中的-15px边距。单独添加15px，也解决了问题，你留下了最后一个列表元素触及列表末尾的文本。

Link to the corrected JSFiddel

水平的自动收报机过早被切断了？

3 个答案: