Endlose horizontal jQuery ticker

Ich bin auf der Suche nach einer endlosen horizontalen news-ticker-Stil. Ich habe gespielt, um mit SmoothScroll und SimpleDivScroll.

SmoothScroll scheint nicht zu funktionieren gut mit Elementen in verschiedenen breiten und SimpleDivScroll ist nur kompatibel mit jQuery 1.4+ und ich bin stecken mit jQuery 1.3.2.

Andere alternativen?

  • Wenn Sie sagen, unendlich ist, wollen Sie es halten, ziehen Sie neue Daten anzeigen? Oder wollen Sie es auf die Anzeige einer vorher definierten endlichen Menge von Daten, die umschlingt, so dass Sie halten können, scrollen von rechts nach Links?
  • Zuvor definierte endliche Menge von Daten, die wickelt sich um wieder.
  • Siehe plugins.jquery.com/tag/ticker für einen überblick über alle verfügbaren ticker-plugins für jQuery.
InformationsquelleAutor digital | 2010-08-11
  1. 7

    Versuchen Sie dies:

    jQuery Twitter-Festzelt von Takien

    • Leider, dieser link ist nun gebrochen.
    • NÖ. Es wird weitergeleitet auf die richtige Seite. 🙂
    • Ich habe fixiert diesen link, um die Schöpfer der website, aber leider alle code-Beispiele gegangen.
    InformationsquelleAutor bangbambang
  2. 4

    Hier ist eine einfache ticker. Ich habe es noch nicht getestet, in allen Browsern.

    <html>
<head>
<title>Horizontal scroller</title>
<style type="text/css">
#scroller{height:100%;margin:0;padding:0;line-height:30px;position:relative;}
#scroller li{float:left;height:30px;padding:0 0 0 10px;list-style-position:inside;}
#scrollerWrapper{height:30px;margin:30px;overflow:hidden;border:1px #333 solid;background:#F2F2F2;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var speed = 5;
    var items, scroller = $('#scroller');
    var width = 0;
    scroller.children().each(function(){
        width += $(this).outerWidth(true);
    });
    scroller.css('width', width);
    scroll();
    function scroll(){
        items = scroller.children();
        var scrollWidth = items.eq(0).outerWidth();
        scroller.animate({'left' : 0 - scrollWidth}, scrollWidth * 100 / speed, 'linear', changeFirst);
    }
    function changeFirst(){
        scroller.append(items.eq(0).remove()).css('left', 0);
        scroll();
    }
});
</script>
</head>
<body>
<div id="scrollerWrapper">
<ul id="scroller">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li> Maecenas sollicitudin, ante id ultrices consectetur, ipsum nisl varius ipsum, sit amet congue eros nulla vitae urna.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li>
</ul>
</div>
</body>
</html>
    InformationsquelleAutor Joyce Babu
  3. 4

    Können Sie versuchen, die jQuery webTicker es ist die einzige, die nicht aufhören, den Blättern nach, die ganze Liste wird abgeschlossen. Wie es sich fortwährend dreht Ihre Elemente. Sie können mehrere Dateien pro Seite und den Stil jeder unabhängig. Ein CSS-Beispiel ist auch auf der Seite selbst

    Es wurde nicht getestet mit jQuery 1.3 aber es ist voll kompatibel mit jQuery 1.4,1.5 und 1.6

    InformationsquelleAutor Jon Mifsud
  4. 0

    Haben Sie gesehen,liScroll? Je nachdem, was Sie bedeuten, von "endlos", Sie könnten tun, was Sie brauchen (es gibt eine Lücke zwischen dem letzten Element und dem wraparound).

    • und Sie behauptet, um die Arbeit mit JQuery 1.2.x oder höher.
    InformationsquelleAutor Mu Mind
  5. 0

    Gibt es die jQuery.Festzelt plugin. Lizenz: ISC.

    Anderen verfügbaren plugins aufgelistet sind, bei https://plugins.jquery.com/tag/ticker/.

    InformationsquelleAutor koppor
Schreibe einen Kommentar