Deze JavaScript code verplaatst een enkele tekstreeks die elke tekst bevat die u kiest door een horizontale selectiekader zonder onderbrekingen. Het doet dit door een kopie van de tekstreeks aan het begin van de scroll toe te voegen zodra deze uit het einde van de selectiekader verdwijnt. Het script berekent automatisch hoeveel kopieën van de inhoud het moet maken om ervoor te zorgen dat de tekst in uw selectiekader nooit opraakt.
Dit omvat de code uit mijn voorbeelden, die twee nieuwe mq-objecten toevoegt met de informatie over wat in die twee selectiekaders moet worden weergegeven. U kunt een van deze verwijderen en de andere wijzigen om één doorlopend selectiekader op uw pagina weer te geven of die verklaringen herhalen om nog meer selectiekaders toe te voegen. De functie mqRotate moet passerende mqr worden genoemd nadat de selectiekaders zijn gedefinieerd, omdat deze de rotaties aankunnen.
// Doorlopende tekstmarkering
// copyright 30 september 2009 door Stephen Chapman
// http://javascript.about.com
// toestemming om deze Javascript op uw webpagina te gebruiken wordt verleend
// op voorwaarde dat alle onderstaande code in dit script (inclusief deze
// comments) wordt zonder enige wijziging gebruikt
functie objWidth (obj) {if (obj.offsetWidth) retourneert obj.offsetWidth;
if (obj.clip) retourneer obj.clip.width; return 0;} var mqr = []; functie
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; voor (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 =
'absoluut'; 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);}
functie mqRotate (mqr) {if (! mqr) terug; voor (var j = mqr.lengte - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; voor (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);}
De werkelijke tekstinhoud voor het selectiekader gaat binnen de div in een span-tag. De breedte van de span-tag wordt gebruikt als de breedte van elke iteratie van de inhoud in het selectiekader (plus 5 pixels om ze van elkaar te scheiden).
Zorg er ten slotte voor dat uw JavaScript-code om het mq-object toe te voegen nadat de pagina is geladen, de juiste waarden bevat.
Om extra selectiekaders toe te voegen, kunt u extra divs instellen in de HTML, waardoor elk zijn eigen tekstinhoud binnen een reeks krijgt; stel extra klassen in als u de selectiekaders anders wilt stijlen; en voeg zoveel nieuwe mq () statements toe als je selectiekaders hebt. Zorg ervoor dat de aanroep mqRotate () hen volgt om de selectiekaders voor ons te bedienen.