jquery:如何循环div

Question

使用jquery,我如何自动连续滚动div？比如本网站的新闻和功能部分:http: //animalsasia.org/.而当你将鼠标悬停在滑块上时,它会停止滚动,直到你将它移开.

有没有一个jquery插件可以做到这一点？任何帮助将非常感激.

Answer 1

我写了一些实例.有对的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 });