Vytvorte textový rámček JavaScriptu

toto JavaScript kód presunie jeden textový reťazec, ktorý obsahuje akýkoľvek text, ktorý vyberiete, do vodorovného medzerníka bez prerušenia. Urobí to pridaním kópie textového reťazca na začiatok zvitku, len čo zmizne z konca priestoru ohraničenia. Skript automaticky zistí, koľko kópií obsahu je potrebné vytvoriť, aby sa zabezpečilo, že vám nikdy nedôjde text v rámčeku.

Zahŕňa to kód z mojich príkladov, ktorý pridáva dva nové objekty mq obsahujúce informácie o tom, čo sa má zobraziť v týchto dvoch markéroch. Môžete jednu z nich odstrániť a zmeniť druhú tak, aby sa na vašej stránke zobrazoval jeden nepretržitý okraj, alebo zopakujte tieto výroky a pridajte ešte viac značiek. Funkcia mqRotate sa musí nazývať prechádzajúca mqr po definovaní markíz, ktoré zvládnu rotácie.

// Kontinuálny text
// copyright 30. septembra 2009 Stephen Chapman
// http://javascript.about.com
// je povolené používať tento Javascript na vašej webovej stránke
// za predpokladu, že všetky kódy uvedené nižšie v tomto skripte (vrátane týchto

instagram viewer

// comments) sa používa bez akýchkoľvek zmien
function objWidth (obj) {if (obj.offsetWidth) návrat obj.offsetWidth;
if (obj.clip) vráti obj.clip.width; návrat 0;} var mqr = []; funkcie
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 = funkcia ()
{mqRotate (mqr);}; this.mqo.onmouseover = funkcia ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (plná / šírka) +1; pre (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 =
, Absolútna '; 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);}
function mqRotate (mqr) {if (! mqr) return; pre (var j = mqr.length-1; j
> -1; j -) {maxa = mqr [j] .arylenthth; pre (var i = 0; imqr [j] .ary [i]. štýl; 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);}

Skutočný textový obsah markízy spadá do značky div v rozpätí značky. Šírka značky rozpätia je to, čo sa použije ako šírka každej iterácie obsahu v rámčeku (plus 5 pixelov len na ich oddelenie od seba).

Nakoniec skontrolujte, či váš kód JavaScript na pridanie objektu mq po načítaní stránky obsahuje správne hodnoty.

Ak chcete pridať ďalšie značky, môžete v HTML nastaviť ďalšie dieliky, pričom každý z nich má svoj vlastný textový obsah v rozpätí; nastaviť ďalšie triedy, ak chcete, aby sa účesy odlišovali; a pridajte toľko nových príkazov mq (), koľko máte značiek. Uistite sa, že za nimi nasleduje volanie mqRotate (), aby pre nás fungovalo markízy.