Detta JavaScript kod flyttar en enda textsträng som innehåller all text du väljer genom ett horisontellt markeringsutrymme utan pauser. Det gör detta genom att lägga till en kopia av textsträngen i början av rullningen så snart den försvinner ur slutet av markeringsutrymmet. Skriptet räknar automatiskt ut hur många kopior av innehållet det behöver skapa för att säkerställa att du aldrig får slut på texten i din markör.
Detta inkluderar koden från mina exempel, som lägger till två nya mq-objekt som innehåller information om vad som ska visas i de två markeringarna. Du kan ta bort en av dem och ändra den andra för att visa en kontinuerlig markering på din sida eller upprepa dessa uttalanden för att lägga till ännu fler markeringar. Funktionen mqRotate måste kallas passerar mqr efter att markeringarna har definierats som att hantera rotationerna.
// Kontinuerlig textmarknad
// copyright 30 september 2009 av Stephen Chapman
// http://javascript.about.com
// tillstånd att använda detta Javascript på din webbsida ges
// förutsatt att all koden nedan i detta skript (inklusive dessa
// kommentarer) används utan några ändringar
funktion objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
om (obj.clip) returnerar obj.clip.width; return 0;} var mqr = []; fungera
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 =
han det; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funktion mqRotate (mqr) {if (! mqr) return; för (var j = mqr. längd - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; för (var i = 0; imqr [j] .ary [i] .stil; 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);}
Det faktiska textinnehållet för markören går in i div i en span-tagg. Spanbrickens bredd är vad som kommer att användas som bredden på varje iteration av innehållet i markeringsramen (plus 5 pixlar bara för att placera dem från varandra).
Slutligen, se till att din JavaScript-kod för att lägga till mq-objektet efter att sidan laddas innehåller rätt värden.
För att lägga till ytterligare markeringar kan du ställa in ytterligare div i HTML och ge var och en sitt eget textinnehåll i ett intervall; ställa in ytterligare klasser om du vill utforma markeringarna annorlunda; och lägg till så många nya mq () uttalanden som du har markeringar. Se till att mqRotate () -samtalet följer dem för att använda markeringarna för oss.