jquery: how to loop a div

元气小坏坏 提交于 2019-12-03 20:09:53

I wrote some working example. There is live example on JsFiddle. The idea is to create container with position=relative, and put div with text into it. Also, we need to create a copy of text to avoid empty space when last part of text is showing. jQuery animate() function will do the rest.

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

Options:

  • direction ("downwards" or "upwards") - direction of text movement;
  • speed - speed of movement.

Here is example of using this plugin with options:

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

Looks like a set of DIV positioned absolutely within the container. They're probably using a setInterval timer to modify the top position of each of the DIVs by a fixed amount every few milliseconds. Once a DIV scrolls completely off the top (the top position is the negative of the DIV height) they probably reposition it at the bottom of the stack. Having enough DIVs to fill the entire container plus some, give the illusion of continuous scrolling because you don't see them pop off the top and back on to the bottom.

If you inspect the element, you can see that it's changing the top position of the elements.

As the list starts, item 1 is within the bounds of the container.

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

As the ticker progresses, it moves item 1 outside of the bounds of the container

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

As item 1 is moved out of bounds, it then moves it to the bottom of the container and continues moving the other items up

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

It's fairly trivial to implement yourself, but jquery vticker should contain the functionality you desire.

You can use the marquee html tag( non standart but should work almost everywhere ) , or check this jquery plugin:

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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!