Wechselnder News Ticker mit Blinkeffekt und anderen Formatierungsmöglichkeiten!
Hallo Magister, super, dass Du bereits eine Lösung gefunden hast!
Ich habe noch etwas an dem Script herumgeschraubt
Habe den "onload-Befehl" (Zeile 8) aus dem Body genommen und mit "window.onload = StartTicker()" (Zeile 135) ersetzt.
Um unterschiedliche Farben darzustellen, war der Eintrag "farbe:..." (Zeile 32+33) und "document.NewsTicker.style.color ....." Zeile 96 notwendig.
Entfernt man jeweils die Schrägstriche in Zeile 34+35 und Zeile 97-100 können weitere Formatierungen pro Nachricht ermöglicht werden.
Es lassen sich jetzt Schriftfarbe, Schriftgröße, Rahmen, Hintergrund und Rahmenradius pro Ticker-Nachricht verändern.
Es können die Formatierungen auskommentiert werden, die nicht verändert werden (Zeile 34,35,95-99). Die Grund-Formatierung kann in der Ausgabezeile 146 gemacht werden.
Die Formatierung in der Ausgabezeile kann auch etwas eleganter über eine class="newsticker" bewerkstelligt werden.
Wichtig! Keine Anführungszeichen im Ticker-Text verwenden!
Wichtig! Alle Werte müssen in verwendete Formatierungen eingetragen werden!
// Tickerparameter var ticker_start = 700 // Wartezeit bis zur ersten Meldung
var ticker_effekt1_start_a = 75 // Darstellungsgeschwindigkeit [ms] var ticker_effekt1_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt2_start_max_blink = 2 // Anzahl der Blinkdarstellungen var ticker_effekt2_start_a = 300 // Blinkgeschwindigkeit [ms] var ticker_effekt2_start_b = 2500 // Darstellungszeit der Meldung [ms]
var ticker_effekt1_ende_a = 50 // Scrollgeschwindigkeit [ms] var ticker_effekt1_ende_b = 100 // Wartezeit bis zur naechsten Meldung [ms]
var ticker_effekt2_ende_max_blink = 2 // Anzahl der Blinkdarstellungen var ticker_effekt2_ende_a = 300 // Blinkgeschwindigkeit [ms] var ticker_effekt2_ende_b = 1000 // Wartezeit bis zur naechsten Meldung [ms]
// Interne Variablen var msgnr = 0
// Aufruf der naechsten Meldung function nextTicker() { msgnr++ if(msgnr >= tickernews.length) msgnr = 0 setTimeout("showTicker(0)", 1000) }
Hier kommt ein weiter Newsticker mit durchlaufendem Text und Verlinkung zu den Themen! Habe einen tollen Newsticker auf "jsfiddle.net" gefunden und ihn ein wenig angepasst!
Was kann das Skript?
Laufschrift ist durchgehend!
Laufschrift stoppt beim Überfahren eines Links!
Links und Grafiken können mit Tooltipps versehen werden!
Lauftext beim Eintragen unkritisch, kann umgebrochen und beliebig formatiert werden!
HTML-Formatierungen möglich!
Bilder und Grafiken können eingetragen werden.
Schnelligkeit und Laufrichtung einstellbar!
Funktioniert in allen Templates!
Installation für alle Templates, auch Mobil!
Das Skript kann beliebig eingetragen werden! Zum schnellen Testen für die Templates (v1-4) in die Kopf- oder Fußzeile, fürs Xobor (v6) in "Eigene Kopfzeile" oder "Eigene Fußzeile"! Möchte man spezielle Punkte im Forum erreichen ist ein Plugin die bessere Wahl!
In Zeile 7 wird die Höhe des Newsticker eingestellt!
In Zeile 3 wird die Hintergrundfarbe des Newstickers angepasst!
In Zeile 8 wird durch "line-height" indirekt der Abstand von Bildern zum Rand eingestellt!
In Zeile 14 wird die Breite oder auch die Höhe der Grafik bestimmt!
In Zeile 26 wird der Abstand zwischen den einzelnen Links festgelegt!
Der Ticker-Text wird zwischen Zeile 41-51 eingetragen, mit Verlinkungen und beliebigen Formatierungen!
<!-- Eintragungen zum Lauftext - Anfang --> <a href="/"><img title="Zur Forum Übersicht" src="//files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif"></a>
<a href="//www.hilfe-tricks-tipps.de/t51f32-Die-Top-Favoriten-aus-diesem-Forum.html">Die meist gefragten Themen</a>
<a href="//www.hilfe-tricks-tipps.de/t94f25-Wichtig-und-notwendig-Mehr-Sicherheit-im-Internet-und-im-Forum.html#msg104">Mehr Sicherheit im Internet</a> <!-- Eintragungen zum Lauftext - Ende -->
</div> </div>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script> <script> $(function () { function startScrolling(ticker_obj, velocity, start_from) { ticker_obj.bind('marquee', function (event, c) { var ob = $(this); var sw = parseInt(ob.parent().width()); var tw = parseInt(ob.width()); var tl = parseInt(ob.position().left); var v = velocity > 0 && velocity < 100 ? (100 - velocity) * 1000 : 5000; var dr = (v * tw / sw) + v; switch (start_from) { case 'right': if (typeof c == 'undefined') { ob.css({ left: sw }); sw = -tw; } else { sw = tl - (tw + sw); }; break; default: if (typeof c == 'undefined') { ob.css({ left: -tw }); } else { sw += tl + tw; }; } ob.animate({ left: sw }, { duration: dr, easing: 'linear', complete: function () { ob.trigger('marquee'); }, step: function () { if (start_from == 'right') { if (parseInt(ob.position().left) < -parseInt(ob.width())) { ob.stop(); ob.trigger('marquee'); }; } else { if (parseInt(ob.position().left) > parseInt(ob.parent().width())) { ob.stop(); ob.trigger('marquee'); }; }; } }); }).trigger('marquee'); ticker_obj.mouseover(function () { $(this).stop(); }); ticker_obj.mouseout(function () { $(this).trigger('marquee', ['resume']); }); };
/* Settings to Function */ var ticker = $('.tickertext'); /* Element to scroll */ var scrolling_velocity = 50; /* 1-99 */ var scrolling_from = 'right'; /* 'right' or 'left' */