时间戳

首页 > 解决方案 > jQuery脚本有问题

javascript - jQuery脚本有问题

问题描述

我使用了我在网上找到的这个脚本（https://codepen.io/erickarbe/pen/gyfFB）但是在第一个循环之后它只是卡在中间并回到开始，如果你看一下它不会工作正常，如果有人能帮我弄清楚，那就太好了！

$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();
});

标签： javascriptjqueryhtmlscrollnews-ticker

解决方案

我发现以下迭代与第一次不同的唯一方法是它们停止在列表的末尾，而不是再次滑到屏幕上。

这是因为当 scrollnews 递归调用自身重新启动时，它假定它只需要按字面意思移动它被告知的高度，忽略在以额外的正偏移量重新开始时拾取的额外滚动距离。因此，您希望将 scrollnews 调用更改为scrollnews(totalTravel + containerHeight, defTiming)

不过，这可能会影响他们设定的时间比率。

推荐阅读