Looge JavaScripti tekstimärk

click fraud protection

See JavaScript kood teisaldab üksiku tekstistringi, mis sisaldab teie valitud teksti läbi horisontaalse telgiruumi ilma pausideta. See toimub, lisades kerimis algusesse teksti stringi koopia niipea, kui see kaob telgi lõpust välja. Skript arvutab automaatselt välja, kui palju eksemplare sisust ta peab looma, et mitte kunagi otsa teie telgi tekst.

See hõlmab minu näidete koodi, mis lisab kaks uut mq-objekti, mis sisaldavad teavet selle kohta, mida nendes kahes telgis kuvada. Võite ühe neist kustutada ja teise muuta, et kuvada oma lehel üks pidev telk, või korrata neid avaldusi, et veelgi rohkem telki lisada. Funktsiooni mqRotate tuleb nimetada mööduvaks mqr pärast seda, kui teljed on määratletud kui sellised, mis käsitlevad pöörlemist.

// Pidev tekstimärk
// autoriõigused 30. september 2009, autor Stephen Chapman
// http://javascript.about.com
// antakse luba selle Javascripti kasutamiseks oma veebilehel
// tingimusel, et kogu selle skripti allpool olev kood (kaasa arvatud need)
// kommentaarid) kasutatakse muudatusi

instagram viewer

funktsioon objWidth (obj) {if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) tagastab obj.clip.width; tagasi 0;} var mqr = []; funktsiooni
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 = see.mqo.style.kõrgus; this.mqo.onmouseout = funktsioon ()
{mqRotate (mqr);}; this.mqo.onmouseover = funktsioon ()
{clearTimeout (mqr [0] .TO);}; see.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; jaoks (var i = 0; i <
maxw; i ++) {this.mqo.ary [i] = document.createElement ('div');
this.mqo.ary [i] .innerHTML = txt; see.mqo.ary [i] .style.positsioon =
'absoluutne'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; see.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funktsioon mqRotate (mqr) {if (! mqr) return; jaoks (var j = mqr pikkus - 1; j
> -1; j--) {maxa = mqr [j] ar.pikkus; jaoks (var i = 0; imqr [j] arüü [i] stiilis; x.left = (parseInt (x.vasak, 10) -1) + 'px';} var y =
mqr [j] aiar [0] stiil; if (parseInt (y.vasa, 10) + parseInt (y.laius, 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);}

Marketi tegelik teksti sisu läheb div-märguande vahemikku. Kaldkriipsu laiust kasutatakse telje sisu iga iteratsiooni laiusena (pluss 5 pikslit, et neid lihtsalt üksteisest eraldada).

Lõpuks veenduge, et teie JavaScripti kood, et lisada mq-objekt pärast lehe laadimist, sisaldab õigeid väärtusi.

Täiendavate telkide lisamiseks saate HTML-is seadistada täiendavad jagunemised, andes igale oma teksti sisu vahemiku piires; seadistage lisaklassid, kui soovite stiileerida telke erinevalt; ja lisage nii palju uusi mq () avaldusi, kui teil on telke. Veenduge, et mqRotate () üleskutse järgiks neid, et meie eest telke juhtida.

instagram story viewer