无缝 JQuery 选框/自动收录器

Question

我在这里找到了一位用户发布的用于无缝 jQuery 选取框/自动收录器的代码。我已经将它修改为在滚动/滚动出时启动和停止，但是一旦用户滚动出去，它通常会滞后。它永远不会完全停止，但代码滚动的速度有时是其原始速度的 1/10。我已经加快了速度，因此更容易看到这种滞后。无论如何，如果有人知道如何解决这个问题，我将不胜感激。

jQuery

​​>

 $(function() {
  var marquee = $("#scroller");
  marquee.css({"overflow": "hidden", "width": "100%"});

  // wrap "My Text" with a span (IE doesn't like divs inline-block)
   marquee.wrapInner("<span>");
  marquee.find("span").css({ "width": "49%", "display": "inline-block", "text-align":"center", "padding-right":"1%" });
  marquee.append(marquee.find("span").clone()); // now there are two spans with "My Text"

   marquee.wrapInner("<div class='scrolling'>");
  marquee.find("div").css("width", "200%");

  var reset = function() {
       $(this).css({"margin-left":"0%"});
       $(this).animate({ "margin-left": "-100%" }, 500, 'linear', reset);
  };

  reset.call(marquee.find("div"));

  marquee.find("div").bind({
mouseenter: function () {
 $(this).stop();
 if($(this).css("margin-left") == "-"+$("#scroller").width() + "px") $(this).css("margin-left", "0%");
},
mouseleave: function() {
 $(this).stop().animate({ "margin-left": "-100%" }, 500, 'linear', reset);
}
});
});

HTML

<div id="scroller">
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
  Lorem ipsum dolor sit amet. &mdash; <a href="#">Username</a>&nbsp;&nbsp;&nbsp;
 </div>

谢谢，

格雷格

Answer 1

很高兴您找到了足够的回复，但它似乎非常复杂，寻找类似解决方案的新用户无疑会感到困惑，除非他们相当熟悉 javascript。具有所有功能的类似 jQuery 插件；股票停止和开始回调，鼠标悬停自动暂停，让您阅读清楚/点击正确的项目。以及完全控制方向和速度的无缝过渡。您可能想看看jQuery webTicker 这是一个免费使用的插件，所以请尽情享受。

Answer 2

似乎答案在于 JQuery 在 .clone() 和 .remove() 调用中管理内存的方式。有一个很好的讨论：

jQuery memory leak with DOM removal

更多详细信息和解决方法，请访问：

http://forum.jquery.com/topic/severe-memory-leak-with-clone

祝你好运！