To JavaScript kod przenosi pojedynczy ciąg tekstowy, który zawiera dowolny tekst, który wybierzesz przez poziomą przestrzeń markizy bez przerw. Odbywa się to poprzez dodanie kopii ciągu tekstowego na początku zwoju, gdy tylko zniknie on z końca obszaru markizy. Skrypt automatycznie sprawdza, ile kopii treści musi utworzyć, aby upewnić się, że nigdy nie zabraknie tekstu w namiocie.
Obejmuje to kod z moich przykładów, który dodaje dwa nowe obiekty mq zawierające informacje o tym, co wyświetlać w tych dwóch markizach. Możesz usunąć jeden z nich i zmienić drugi, aby wyświetlać jeden ciągły markizę na swojej stronie lub powtórzyć te instrukcje, aby dodać jeszcze więcej markiz. Funkcja mqRotate musi zostać wywołana przez przekazanie mqr po zdefiniowaniu markizy, która będzie obsługiwać rotacje.
// Ciągły namiot tekstowy
// prawa autorskie 30 września 2009 r. autor: Stephen Chapman
// http://javascript.about.com
// udzielono zgody na używanie tego Javascript na twojej stronie internetowej
// pod warunkiem, że cały kod poniżej w tym skrypcie (łącznie z tymi
// komentarze) jest używany bez żadnych zmian
funkcja objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) zwraca obj.clip.width; return 0;} var mqr = []; funkcjonować
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; dla (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 =
'absolutny'; 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);}
funkcja mqRotate (mqr) {if (! mqr) return; dla (var j = mqr. długość - 1; jot
> -1; j--) {maxa = mqr [j] .ary.length; dla (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);}
Rzeczywista treść tekstu dla markizy znajduje się w div w znaczniku span. Szerokość znacznika zakresu jest używana jako szerokość każdej iteracji zawartości w namiocie (plus 5 pikseli tylko po to, aby je rozdzielić).
Na koniec upewnij się, że kod JavaScript, aby dodać obiekt mq po załadowaniu strony, zawiera prawidłowe wartości.
Aby dodać dodatkowe markizy, możesz ustawić dodatkowe elementy div w kodzie HTML, nadając każdemu własną treść tekstową w ramach zakresu; ustaw dodatkowe klasy, jeśli chcesz inaczej stylizować markizy; i dodaj tyle nowych instrukcji mq (), ile masz marek. Upewnij się, że wywołanie mqRotate () podąża za nimi, aby obsługiwać markizy dla nas.