Frage

Ich suche ein bisschen JQuery oder JS, mit dem ich eine horizontal scrollende „Newsticker“-Liste erstellen kann.

Der erzeugte HTML-Code muss ebenfalls standardkonform sein.

Ich habe versucht liScroll Dies hat jedoch die Angewohnheit, dass es zu Fehlern kommt (einige Inhalte landen in einer zweiten Zeile am Anfang des Bildlaufs), insbesondere bei längeren Listen.

Ich habe es auch versucht diesen News-Ticker Wenn jedoch ein DOCTYPE enthalten ist, erfolgt das Scrollen am Ende jedes Zyklus eher ruckartig als reibungslos.

Alle Vorschläge sind willkommen.

Bearbeiten

Dank Matt Hinzes Vorschlag wurde mir klar, dass ich mit JQuery animate das tun konnte, was ich wollte (ich benötige kontinuierliches Scrollen, nicht diskretes Scrollen wie im Beispiel).Allerdings stieß ich schnell auf ähnliche Probleme wie mit liScroll und erkannte schließlich, dass ein CSS-Problem (wie immer) dafür verantwortlich war.

Lösung:liScroll – Ändern Sie den Standardwert „var stripWidth = 0“ auf etwa 100, um etwas Platz zu schaffen und einen neuen Zeilenumbruch zu vermeiden.

War es hilfreich?

Lösung

Smooth Div Scroll kann auch als Newsticker/Börsenticker verwendet werden.Es kann angehalten werden, wenn die Maus darüber oder nach unten bewegt wird, und es kann endlos wiederholt werden, wenn Sie dies wünschen.

Hier ist das Beispiel mit laufendem Ticker.

Andere Tipps

Hier sind zwei weitere Lösungen, die etwas einfacher zu implementieren scheinen:

  1. Nachrichten-Ticker
  2. Newsticker (BBC-Stil)

Eine alternative Lösung wäre auch die jQuery-WebTicker;Es ist Liscroll sehr ähnlich, behebt jedoch das Problem, dass der Ticker stoppt, nachdem die gesamte Liste abgeschlossen ist.Während gleichzeitig einige neue, ausgefallene Funktionen hinzugefügt werden, wie z.Bewegungsrichtung;Geschwindigkeit;und die Möglichkeit, mehrere Ticker pro Seite zu verwenden.

Der beim Liscroll auftretende Fehler in der zweiten Zeile kann „behoben“ werden, indem ein Listenelement hinzugefügt wird, das eine nicht zerbrechliche Leerzeichenentität enthält <li>&nbsp;</li> am Ende jeder Liste ;)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top