Vytvořte textový rámeček JavaScriptu

Tento JavaScript kód přesune jeden textový řetězec, který obsahuje jakýkoli text, který vyberete, do vodorovného mezerníku bez přerušení. To se provádí přidáním kopie textového řetězce na začátek rolování, jakmile zmizí z konce prostoru ohraničení. Skript automaticky zjistí, kolik kopií obsahu musí být vytvořeno, aby bylo zajištěno, že vám nikdy nedojde text v rámečku.

To zahrnuje kód z mých příkladů, který přidává dva nové objekty mq obsahující informace o tom, co se má v těchto dvou značkách zobrazit. Můžete jeden z nich smazat a změnit jiný tak, aby se na stránce zobrazoval jeden souvislý rámeček, nebo opakovat tyto příkazy a přidat další markýzy. Funkce mqRotate musí být nazývána předáváním mqr poté, co jsou značky definovány tak, že budou zpracovávat rotace.

// Nepřetržitý textový rámeček
// copyright 30. září 2009 Stephen Chapman
// http://javascript.about.com
// je povoleno používat tento Javascript na vaší webové stránce
// za předpokladu, že veškerý níže uvedený kód v tomto skriptu (včetně těchto

instagram viewer

// comments) se používá bez jakýchkoli změn
function objWidth (obj) {if (obj.offsetWidth) návrat obj.offsetWidth;
if (obj.clip) vrátí obj.clip.width; návrat 0;} var mqr = []; funkce
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 (plnohodnotný / široký) +1; pro (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 =
'absolutní'; 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; pro (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; pro (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.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);}

Skutečný textový obsah markýzy je uvnitř tagu div. Šířka značky rozpětí je to, co bude použito jako šířka každé iterace obsahu v rámečku (plus 5 pixelů, jen aby byly od sebe odděleny).

Nakonec se ujistěte, že váš kód JavaScript pro přidání objektu mq po načtení stránky obsahuje správné hodnoty.

Chcete-li přidat další značky, můžete v HTML nastavit další divy, přičemž každý má svůj vlastní textový obsah uvnitř rozpětí; nastavit další třídy, chcete-li styly odlišit; a přidejte tolik nových příkazů mq (), kolik jich máte. Ujistěte se, že volání mqRotate () je následuje, aby pro nás fungovaly markýzy.