jQuery脚本有问题

时间:2018-06-16 01:52:57

标签: javascript jquery html scroll news-ticker

我使用了我在网上找到的这个脚本(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();
});

1 个答案:

答案 0 :(得分:0)

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

这是因为当scrollnews以递归方式调用自身重新启动时,它假定它只需要按照它所告知的高度行进,忽略在重新开始时使用额外的正偏移量所选择的额外滚动距离。因此,您希望将scrollnews调用更改为var executeGlobalSave = function () { var gridData = jQuery(grid_selector).getRowData(); var postData = JSON.stringify(gridData); console.log("JSON serialized jqGrid data:\n" + postData); $.ajax({ type: "PUT", url: URLUpdateAll, data : { jgGridData: postData }, dataType:"json", contentType: "application/json; charset=utf-8", success: function(response, textStatus, xhr) { console.log("success"); }, error: function(xhr, textStatus, errorThrown) { console.log("error"); } }); };

但是,这可能会甩掉他们设定的时间比例。