3

使用 jquery，如何连续自动滚动 div？喜欢本网站的新闻和专题部分：http: //animalsasia.org/。而且，当您将鼠标悬停在滑块上时，它会停止滚动，直到您将鼠标悬停。

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

4

4 回答 4

14

我写了一些工作示例。JsFiddle 上有现场示例。这个想法是创建位置=相对的容器，并将带有文本的 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

您可以使用 marquee html 标记（非标准，但几乎可以在任何地方使用），或者查看这个 jquery 插件：

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

于 2012-04-19T01:07:07.890 回答