1

シームレスな 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>

ありがとう、

グレッグ

4

2 に答える 2

1

適切な回答を見つけてよかったですが、非常に複雑なようで、同様のソリューションを探している新しいユーザーは、JavaScript にかなり精通していない限り、間違いなく混乱するでしょう。すべての機能を備えた同様の jQuery プラグイン。ティッカーの停止と開始のコールバック、マウスオーバーでの自動一時停止により、適切なアイテムを明確に読んだりクリックしたりできます。方向と速度を完全に制御できるシームレスな移行。jQuery webTickerをご覧になることをお勧めします。これは無料で使用できるプラグインですので、お楽しみください。

于 2011-12-09T15:09:54.647 に答える
0

答えは、JQuery が .clone() および .remove() 呼び出しでメモリを管理する方法にあるようです。非常に良い議論があります:

DOM の削除による jQuery のメモリ リーク

詳細と回避策は、次の場所で入手できます。

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

幸運を！

于 2010-09-15T19:36:28.030 に答える