jquery: Schleife für ein div

Question

Mit jquery, wie kann ich automatisch scrollen ein div kontinuierlich? wie die Nachrichten und Features Abschnitt dieser Website: http://animalsasia.org/ . Und wenn man mit dem Mauszeiger über den Schieberegler fährt, wird der Bildlauf angehalten, bis man den Mauszeiger wieder entfernt.

Gibt es ein Jquery-Plugin, das dies ermöglicht? Jede Hilfe würde sehr geschätzt werden.

Answer 1

Ich habe ein funktionierendes Beispiel geschrieben. Es gibt Live-Beispiel auf JsFiddle . Die Idee ist, Container mit position=relative zu erstellen, und setzen div mit Text in sie. Außerdem müssen wir eine Kopie des Textes erstellen, um leeren Raum zu vermeiden, wenn der letzte Teil des Textes angezeigt wird. jQuery animate() Funktion wird den Rest erledigen.

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

Optionen:

• direction ("abwärts" oder "aufwärts") - Richtung der Textbewegung;
• speed - Geschwindigkeit der Bewegung.

Hier ein Beispiel für die Verwendung dieses Plugins mit Optionen:

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

Answer 2

Sieht aus wie eine Reihe von DIV, die absolut innerhalb des Containers positioniert sind. Sie verwenden wahrscheinlich einen setInterval Timer, um die top Position der einzelnen DIVs um einen festen Betrag alle paar Millisekunden. Sobald ein DIV ganz nach oben gerollt ist (die obere Position ist das Negativ der DIV-Höhe), wird es wahrscheinlich am unteren Ende des Stapels neu positioniert. Wenn genügend DIVs vorhanden sind, um den gesamten Container plus einige zu füllen, entsteht die Illusion eines kontinuierlichen Bildlaufs, weil man nicht sieht, wie sie von oben nach unten springen.

Answer 3

Wenn Sie das Element untersuchen, können Sie sehen, dass es die top Position der Elemente.

Zu Beginn der Liste befindet sich der Eintrag 1 innerhalb der Grenzen des Containers.

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

Wenn die Laufschrift weiterläuft, wird Element 1 aus dem Container herausgeschoben

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

Wenn Artikel 1 aus dem Rahmen fällt, wird er an den Boden des Behälters verschoben und die anderen Artikel werden nach oben verschoben.

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

Es ist ziemlich trivial, es selbst zu implementieren, aber jquery vticker sollte die von Ihnen gewünschte Funktionalität enthalten.

Answer 4

Sie können den Marquee-HTML-Tag verwenden (nicht standardmäßig, sollte aber fast überall funktionieren), oder dieses Jquery-Plugin ausprobieren:

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