Dette Javascript kode vil flytte en enkelt tekststreng som inneholder all tekst du velger gjennom et horisontalt markeringsområde uten pauser. Det gjør dette ved å legge til en kopi av tekststrengen til begynnelsen av rullen så snart den forsvinner ut av enden av markeringsrommet. Skriptet regner automatisk ut hvor mange kopier av innholdet det trenger å lage for å sikre at du aldri går tom for teksten i markeringsrammen din.
Dette inkluderer koden fra eksemplene mine, som legger til to nye mq-objekter som inneholder informasjonen om hva som skal vises i de to markeringene. Du kan slette en av disse og endre den andre til å vise en kontinuerlig markør på siden din eller gjenta utsagnene for å legge til enda flere markeringer. MqRotate-funksjonen må kalles passerende mqr etter at markeringene er definert som som vil håndtere rotasjonene.
// Kontinuerlig tekstmarkering
// copyright 30. september 2009 av Stephen Chapman
// http://javascript.about.com
// tillatelse til å bruke dette Javascript på din webside er gitt
// forutsatt at all koden nedenfor i dette skriptet (inkludert disse
// kommentarer) brukes uten endringer
funksjon objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
hvis (obj.clip) returnerer obj.clip.width; return 0;} var mqr = []; funksjon
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 ( 'spenn') [0] .innerHTML; this.mqo.innerHTML
= ''; var heit = this.mqo.style.height; this.mqo.onmouseout = funksjon ()
{mqRotate (mqr);}; this.mqo.onmouseover = funksjon ()
{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.position =
'Absolutte'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; dette.mqo.ary [i] .style.height =
han det; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funksjon mqRotate (mqr) {if (! mqr) return; for (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; for (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mgR [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);}
Selve tekstinnholdet for markøren går inn i div i en span-kode. Bredden på span-taggen er det som vil bli brukt som bredden på hver iterasjon av innholdet i markeringsrammen (pluss 5 piksler bare for å plassere dem fra hverandre).
Til slutt, sørg for at JavaScript-koden din for å legge til mq-objektet etter at siden lastes inn inneholder riktige verdier.
For å legge til flere markeringer, kan du sette opp flere divisjoner i HTML, og gi hver sitt eget tekstinnhold i et spenn; sette opp flere klasser hvis du vil style markeringene annerledes; og legg til så mange nye mq () uttalelser som du har markiser. Forsikre deg om at mqRotate () -samtalet følger dem for å betjene markeringene for oss.