Izradite JavaScript Text Marquee

Ovaj JavaScript kôd će premjestiti jedan tekstni niz koji sadrži bilo koji tekst koji odaberete kroz horizontalni okvir okvira bez prijeloma. To se događa dodavanjem kopije tekstualnog niza na početak pomicanja čim nestane s kraja prostora za markiranje. Skripta automatski utvrđuje koliko kopija sadržaja treba stvoriti da vam ne bi ponestalo teksta u vašoj marki.

To uključuje kôd iz mojih primjera, koji dodaje dva nova mq objekta koji sadrže informacije o tome što se prikazuje u te dvije marke. Možete izbrisati jedan od njih, a drugi promijeniti tako da se prikazuje jedna kontinuirana marka na vašoj stranici ili ponovite te izjave kako biste dodali još marki. Funkcija mqRotate mora se nazvati prolazeći mqr nakon što su marke definirane kao one koje će upravljati rotacijama.

// Kontinuirana tekstualna marka
// autorska prava 30. rujna 2009. od Stephena Chapmana
// http://javascript.about.com
// dozvoljeno je korištenje ovog Javascripta na vašoj web stranici
// pod uvjetom da je sav kod naveden u ovoj skripti (uključujući ovu

instagram viewer

// komentari) koristi se bez ikakvih preinaka
funkcija objWidth (obj) {if (obj.offsetWidth) vraća obj.offsetWidth;
ako (obj.clip) vrati obj.clip.width; return 0;} var mqr = []; funkcija
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 = funkcija ()
{mqRotate (mqr);}; this.mqo.onmouseover = funkcija ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw =
Math.ceil (fulwid / wid) +1; za (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 =
„Apsolutni”; 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);}
funkcija mqRotate (mqr) {if (! mqr) return; za (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; za (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mQ [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);}

Stvarni tekst teksta oznake ide unutar diva u rasponu oznake. Širina rasponske oznake ono će se koristiti kao širina svake iteracije sadržaja u okviru (plus 5 piksela samo da ih odmakne jedan od drugog).

Konačno, provjerite sadrži li vaš JavaScript kôd za dodavanje mq objekta nakon učitavanja stranice ispravne vrijednosti.

Da biste dodali dodatne marke, možete postaviti dodatne dijelove u HTML-u dajući svakom vlastitom tekstualnom sadržaju unutar raspona; odredite dodatne časove ako želite drugačije stilizirati markize; i dodajte onoliko novih mq () izjava koliko imate oznaka. Obavezno ih slijedi poziv mqRotate () da bi upravljali oznakama za nas.

instagram story viewer