3

jqueryを使用して、divを継続的に自動スクロールするにはどうすればよいですか? このウェブサイトのニュースと機能セクションのように: http://animalsasia.org/ . また、スライダーにカーソルを合わせると、カーソルを離すまでスクロールが停止します。

それを行うjqueryプラグインはありますか？どんな助けでも大歓迎です。

4

4 に答える 4

14

私はいくつかの実用的な例を書きました。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 });
于 2012-04-19T01:37:54.157 に答える
2

コンテナ内に完全に配置された DIV のセットのように見えます。彼らはおそらく setInterval タイマーを使用して、top各 DIV の位置を数ミリ秒ごとに一定量ずつ変更しています。DIV が上部から完全にスクロールすると (上部の位置は DIV の高さの負の値になります)、スタックの下部に再配置される可能性があります。コンテナ全体といくつかを満たすのに十分な DIV があると、上から飛び出して下に戻るのが見えないため、継続的にスクロールしているように見えます。

于 2012-04-19T01:07:17.167 に答える
2

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には必要な機能が含まれている必要があります。

于 2012-04-19T01:08:07.663 に答える
0

マーキー html タグ (標準ではありませんが、ほとんどどこでも動作するはずです) を使用するか、この jquery プラグインを確認できます。

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

于 2012-04-19T01:07:07.890 に答える