jquery：divをループする方法

Question

jqueryを使用して、divを連続的に自動スクロールできますか？このウェブサイトのニュースと機能のセクションのように：http://animalsasia.org/。また、スライダの上にマウスを置くと、マウスを移動するまでスクロールが停止します。

そこにjqueryプラグインがありますか？どんな助けでも大歓迎です。

Answer 1

あなたはマーキーhtmlタグ（非スタンダールのが、ほとんどどこでも動作するはずです）を使用することができ、またはこのjQueryプラグインを確認してください。

http://remysharp.com/2008/09/10/the-silky-smooth-marquee/

Answer 2

は絶対にコンテナ内に配置されたDIVのセットのように見えます。おそらく、setIntervalタイマーを使用して、DIVのそれぞれの位置を数ミリ秒ごとに一定量だけ変更することになります（top）。 DIVが一番上から完全にスクロールすると（一番上の位置はDIVの高さが負です）、おそらくスタックの一番下に移動します。コンテナー全体といくつかのものを満たすのに十分なDIVを持っていれば、上から飛び出して下に戻るのを見ることができないので、連続スクロールの錯覚を与えます。

Answer 3

要素を調べると、要素の位置がtopに変更されていることがわかります。

リストが開始されると、アイテム1はコンテナの境界内にあります。

------ 
item 1 
item 2 
item 3 
------ 
item 4 

ティッカーが進行するにつれて、それは容器項目1として

item 1 
----- 
item 2 
item 3 
item 4 
------ 

の境界の外にアイテム1を移動させるが境界の外に移動され、それは次いで、容器の底部に移動し、あなたが望む機能が含まれている必要があり

----- 
item 2 
item 3 
item 4 
----- 
item 1 

それは自分自身を実装することはかなり些細だ

が、jquery vtickerまで他の項目を移動し続けています。

Answer 4

私はいくつかの実例を書いています。 live example on JsFiddleがあります。コンポジションをposition = relativeで作成し、divにテキストを挿入することです。また、テキストの最後の部分が表示されているときに空のスペースを避けるために、テキストのコピーを作成する必要があります。 jQuery animate（）関数は残りの処理を行います。

HTML：

<div class="news_container"> 
    <div class="news"> 
     <div class="text"> 
      Long text 
     </div> 
    </div> 
</div> 

CSS：

.news_container { 
    border: 1px solid black; 
    width:150px; 
    height: 300px; 
    overflow: hidden; 
    position: relative; 
    padding: 3px; 
} 

.news { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
} 

はJavaScript：

(function($, undefined) { 
    $.fn.loopScroll = function(p_options) { 
    var options = $.extend({ 
     direction: "upwards", 
     speed: 60 
    }, p_options); 

    return this.each(function() { 
     var obj = $(this).find(".news"); 
     var text_height = obj.find(".text").height(); 
     var start_y, end_y; 
     if (options.direction == "downwards") { 
     start_y = -text_height; 
     end_y = 0; 
     } else if (options.direction == "upwards") { 
     start_y = 0; 
     end_y = -text_height; 
     } 

     var animate = function() { 
     // setup animation of specified block "obj" 
     // calculate distance of animation  
     var distance = Math.abs(end_y - parseInt(obj.css("top"))); 

     //duration will be distance/speed 
     obj.animate(
      { top: end_y }, //scroll upwards 
      1000 * distance/options.speed, 
      "linear", 
      function() { 
      // scroll to start position 
      obj.css("top", start_y); 
      animate();  
      } 
     ); 
     }; 

     obj.find(".text").clone().appendTo(obj); 
     $(this).on("mouseover", function() { 
     obj.stop(); 
     }).on("mouseout", function() { 
     animate(); // resume animation 
     }); 
     obj.css("top", start_y); 
     animate(); // start animation  
    }); 
    }; 
}(jQuery)); 

$(".news_container").loopScroll(); 

オプション：

• direction（「下向き」または「上向き」） - テキスト移動の方向。
• speed - 動きの速さ。ここで

オプションでこのプラグインを使用する例です：

$("#example3").loopScroll(); 
$("#example4").loopScroll({ speed: 120 }); 
$("#example1").loopScroll({ direction: "downwards" }); 
$("#example2").loopScroll({ direction: "downwards", speed: 30 });