Ez JavaScript A kód egy szöveges karakterláncot mozgat, amely bármilyen választott szöveget tartalmaz egy vízszintes sávban, szünetek nélkül. Ezt úgy hajtja végre, hogy hozzáadja a szöveg karakterláncának egy példányát a görgetés elejéhez, amint az eltűnik a sátor helyének végéből. A szkript automatikusan meghatározza a tartalom hány példányát, amelyet létrehoznia kell annak biztosítása érdekében, hogy soha ne fogyjon el a sátor szövege.
Ez magában foglalja a példáimban szereplő kódot, amely két új mq objektumot ad hozzá, amely tartalmazza az abban a két sátorban megjelenítendő információkkal kapcsolatos információkat. Törölheti az egyiket, és a másikot megváltoztathatja, hogy egy folyamatos sávot jelenítsen meg az oldalon, vagy ismételje meg ezeket a nyilatkozatokat, hogy még több sátor hozzáadjon. Az mqRotate függvényt elhaladó mqr-nek kell hívni, miután a sávokat úgy határozták meg, hogy azok kezeljék a forgásokat.
// Folyamatos szöveges sátor
// szerzői jogok: 2009. szeptember 30., Stephen Chapman
// http://javascript.about.com
// engedélyt kapott a Javascript használatához a weboldalán
// feltéve, hogy a szkriptben szereplő összes kód (beleértve ezeket)
// megjegyzések) változtatás nélkül használható
függvény objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) visszatér az obj.clip.width; visszatérés 0;} var mqr = []; funkció
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; for (var i = 0; i <
maxw; i ++) {this.mqo.ary [i] = document.createElement ( 'div');
this.mqo.ary [i] .innerHTML = txt; this.mqo.ary [i] .style.pozíció =
'abszolút'; 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);}
mqRotate függvény (mqr) {if (! mqr) visszatérés; for (var j = mqr hosszúság - 1; j
> -1; j--) {maxa = mqr [j] ar.hossz; for (var i = 0; imqr [j] ar [i] .style; x.left = (parseInt (x.balra, 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);}
A sátor tényleges szöveges tartalma a div részen belül van egy span címkében. A mérőcímke szélességét fogják használni a sátorban levő tartalom minden egyes iterációjának szélességeként (plusz 5 pixel, csak egymástól való elhelyezés érdekében).
Végül győződjön meg arról, hogy az JavaScript feltöltésekor az mq objektum hozzáadása után az oldal betöltése a megfelelő értékeket tartalmazza.
További sátrak hozzáadásához beállíthat további szétválasztásokat a HTML-ben, mindegyiknek megadva a saját szöveges tartalmát egy időtartamon belül; hozzon létre további osztályokat, ha a sátorokat más módon szeretné stílusolni; és adjunk hozzá annyi új mq () utasítást, amennyit már tettünk. Győződjön meg arról, hogy az mqRotate () hívás követi őket, hogy a sávokat nekünk működtessék.