Dies JavaScript Code verschiebt eine einzelne Textzeichenfolge, die beliebigen Text enthält, ohne Unterbrechungen durch einen horizontalen Auswahlrahmen. Dazu wird am Anfang der Schriftrolle eine Kopie der Textzeichenfolge hinzugefügt, sobald sie am Ende des Auswahlrahmens verschwindet. Das Skript ermittelt automatisch, wie viele Kopien des Inhalts erstellt werden müssen, um sicherzustellen, dass Ihnen der Text in Ihrem Auswahlrahmen nie ausgeht.
Dies schließt den Code aus meinen Beispielen ein, der zwei neue mq-Objekte hinzufügt, die Informationen darüber enthalten, was in diesen beiden Zelten angezeigt werden soll. Sie können eines davon löschen und das andere ändern, um ein fortlaufendes Laufschriftzeichen auf Ihrer Seite anzuzeigen, oder diese Anweisungen wiederholen, um noch weitere Auswahlrechtecke hinzuzufügen. Die Funktion mqRotate muss als mqr übergeben bezeichnet werden, nachdem die Zelte so definiert wurden, dass sie die Rotationen verarbeiten.
// Fortlaufender Textrahmen
// Copyright 30. September 2009von Stephen Chapman
// http://javascript.about.com
// Die Erlaubnis zur Verwendung dieses Javascript auf Ihrer Webseite wird erteilt
// vorausgesetzt, dass der gesamte unten stehende Code in diesem Skript (einschließlich dieser)
// Kommentare) wird unverändert verwendet
Funktion objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) gibt obj.clip.width zurück; return 0;} var mqr = []; Funktion
mq (id) {this.mqo = document.getElementById (id); var wid =
objWidth (this.mqo.getElementsByTagName ('span') [0]) + 5; var fulwid =
objWidth (this.mqo); var txt =
this.mqo.getElementsByTagName ('span') [0] .innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout = function ()
{mqRotate (mqr);}; this.mqo.onmouseover = function ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; für (var i = 0; i <
maxw; i ++) {this.mqo.ary [i] = document.createElement ('div');
this.mqo.ary [i] .innerHTML = txt; this.mqo.ary [i] .style.position =
'absolut'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; this.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
Funktion mqRotate (mqr) {if (! mqr) return; für (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; für (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ary [0] .style; if (parseInt (y.left, 10) + parseInt (y.width, 10) <0)
{var z = mqr [j] .ary.shift (); z.style.left = (parseInt (z.style.left) +
parseInt (z.style.width) * maxa) + 'px'; mqr [j] .ary.push (z);}}
mqr [0] .TO = setTimeout ('mqRotate (mqr)', 10);}
Der eigentliche Textinhalt für das Auswahlrechteck befindet sich in einem span-Tag innerhalb des div. Die Breite des Span-Tags wird als Breite jeder Iteration des Inhalts im Auswahlrahmen verwendet (plus 5 Pixel, um sie voneinander zu trennen).
Stellen Sie schließlich sicher, dass Ihr JavaScript-Code zum Hinzufügen des mq-Objekts nach dem Laden der Seite die richtigen Werte enthält.
Um zusätzliche Markierungen hinzuzufügen, können Sie zusätzliche Divs im HTML-Code einrichten und jedem innerhalb eines Zeitraums einen eigenen Textinhalt zuweisen. Richten Sie zusätzliche Klassen ein, wenn Sie die Zelte anders gestalten möchten. und fügen Sie so viele neue mq () -Anweisungen hinzu, wie Sie Zelte haben. Stellen Sie sicher, dass der Aufruf von mqRotate () ihnen folgt, um die Zelte für uns zu betreiben.