jQuery的：如何循环一个div(jquery: how to loop a div)

使用jQuery，我怎么能自动连续滚动一个div？像这样的网站的新闻和专题部分： http://animalsasia.org/ 。而且，当你将鼠标悬停在滑块，直到你离开悬停它停止滚动。

有一个jQuery插件，能做到这一点？任何帮助将非常感激。

Answer 1:

我写了一些工作示例。有对的jsfiddle活生生的例子。我们的想法是创建一个位置=相对的容器，并把DIV文本到它。此外，我们需要创建文本的副本，以避免在文本的最后部分显示空的空间。 jQuery的动画（）函数将做休息。

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 });

Answer 2:

貌似容器内的绝对定位的一组DIV的。他们很可能使用的setInterval定时器修改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:

您可以使用选框HTML标签（非非标准但应该工作几乎无处不在），或检查这个jQuery插件：

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

文章来源: jquery: how to loop a div