Бесшовные шатер / тикер JQuery - PullRequest
Новая
       36

Бесшовные шатер / тикер JQuery

1 голос
/ 28 августа 2010

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

Спасибо

Грег

Ответы [ 2 ]

1 голос
/ 09 декабря 2011

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

0 голосов
/ 15 сентября 2010

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

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

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

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

Удачи!

...