Dette JavaScript kode flytter en enkelt tekststreng, der indeholder al tekst, du vælger gennem et vandret markeringsområde uden pauser. Det gør dette ved at tilføje en kopi af tekststrengen til starten af rullen, så snart den forsvinder ud af slutningen af markeringspladsen. Scriptet regner automatisk ud, hvor mange kopier af indholdet det skal oprettes for at sikre, at du aldrig løber tør for teksten i din markering.
Dette inkluderer koden fra mine eksempler, der tilføjer to nye mq-objekter, der indeholder oplysningerne om, hvad der skal vises i disse to markeringer. Du kan slette en af disse og ændre den anden til at vise en kontinuerlig markering på din side eller gentage disse udsagn for at tilføje endnu flere markeringer. Funktionen mqRotate skal kaldes passerende mqr, når markeringerne er defineret som den, der håndterer rotationerne.
// Kontinuerlig tekst markering
// copyright 30. september 2009 af Stephen Chapman
// http://javascript.about.com
// tilladelse til at bruge dette Javascript på din webside gives
// forudsat at alle nedenstående koder i dette script (inklusive disse
// kommentarer) bruges uden ændringer
funktion objWidth (obj) {hvis (obj.offsetWidth) returnerer obj.offsetWidth;
hvis (obj.clip) returnerer obj.clip.width; return 0;} var mqr = []; fungere
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.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 =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funktion mqRotate (mqr) {hvis (! mqr) returnerer; for (var j = mqr. længde - 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 =
mqr [j] .ary [0] .style; if (parseInt (y.lift, 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 faktiske tekstindhold for markøren går ind i div i et span-tag. Spanmærkets bredde er det, der vil blive brugt som bredden på hver iteration af indholdet i markeringsrammen (plus 5 pixels bare for at placere dem fra hinanden).
Endelig skal du sikre dig, at din JavaScript-kode for at tilføje mq-objektet, når siden indlæses, indeholder de rigtige værdier.
For at tilføje yderligere markeringer kan du opsætte yderligere divs i HTML og give hver sit eget tekstindhold inden for et spenn; opsæt yderligere klasser, hvis du vil style markeringerne anderledes; og tilføj så mange nye mq () udsagn, som du har markeringer. Sørg for, at mqRotate () -opkaldet følger dem for at betjene markeringerne for os.