Бесшовная бегущая строка JQuery

Я нашел здесь код, опубликованный пользователем для бесшовной бегущей строки 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>

Спасибо,

Грег


jquery ticker marquee
person user433351    schedule 27.08.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

рад, что вы нашли адекватный ответ, однако он кажется совершенно сложным, и новые пользователи, ищущие подобное решение, несомненно, запутаются, если они не достаточно хорошо разбираются в javascript. Аналогичный плагин jQuery со всем функционалом; обратные вызовы остановки и запуска тикера, автоматическая пауза при наведении курсора мыши, чтобы вы могли четко читать / щелкать нужный элемент. И плавный переход с полным контролем направления и скорости. Вы можете посмотреть jQuery webTicker, это бесплатный плагин, так что наслаждайтесь.

person Jon Mifsud    schedule 09.12.2011

arrow_upward
0
arrow_downward

Похоже, ответ заключается в том, как JQuery управляет памятью в вызовах .clone() и .remove(). Очень хорошее обсуждение на:

утечка памяти jQuery с удалением DOM

Дополнительные сведения и обходной путь доступны по адресу:

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

Удачи!

person Simon Young    schedule 15.09.2010
comment
Спасибо за ответ, на самом деле. Я обнаружил проблему через несколько дней после публикации. По сути, анимация вызывалась с той же скоростью всякий раз, когда она останавливалась. Таким образом, если бы у него было 5000 пикселей для прокрутки или 5 пикселей для прокрутки, он сделал бы это за 500 мс. Я переписал код, чтобы учесть новую скорость в зависимости от того, где был остановлен скроллер. Теперь работает без нареканий :). - person user433351; 27.09.2010