无缝 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 内存泄漏与 DOM 删除

更多详细信息解决方法可在：

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

祝你好运！