Ustvari besedilno oznako JavaScript

Tole JavaScript koda premakne en sam besedilni niz, ki vsebuje poljubno besedilo, ki ga izberete skozi vodoravni okvir oznake, brez prelomov. To stori tako, da kopijo besedilnega niza doda na začetek drsenja, takoj ko izgine iz konca prostora za oznake. Skript samodejno določi, koliko kopij vsebine potrebuje za ustvarjanje, da vam nikoli ne zmanjka besedila v založbi.

To vključuje kodo iz mojih primerov, ki dodaja dva nova mq predmeta, ki vsebujeta informacije o tem, kaj naj se prikažejo v teh dveh okvirih. Eno od teh lahko izbrišete, drugo pa spremenite tako, da na svoji strani prikaže eno nepretrgano oznako ali pa ponovite te navedbe, da dodate še več oznak. Funkcija mqRotate mora biti imenovana mimo mqr, potem ko so oznake definirane kot, ki bodo upravljale rotacije.

// Nenehna besedilna oznaka
// avtorske pravice 30. septembra 2009 Stephen Chapman
// http://javascript.about.com
// dovoljenje za uporabo tega Javascript na vaši spletni strani je odobreno
// pod pogojem, da je v tej skripti vsa spodnja koda (vključno s temi)

instagram viewer

// komentarji) se uporablja brez kakršnih koli sprememb
funkcija objWidth (obj) {if (obj.offsetWidth) vrne obj.offsetWidth;
če (obj.clip) vrne obj.clip.width; return 0;} var mqr = []; funkcijo
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 =
'absolutno'; 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) se vrne; 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 =
mqr [j] .ary [0] .style; če (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);}

Dejanska vsebina besedila za oznako je znotraj diva v razpon oznaki. Širina razponske oznake je tisto, kar bo uporabljeno kot širina vsake ponovitve vsebine v sliki (plus 5 slikovnih pik samo, da jih odmaknemo drug od drugega).

Končno preverite, ali vaša JavaScript koda za dodajanje predmeta mq po nalaganju strani vsebuje prave vrednosti.

Če želite dodati dodatne oznake, lahko v HTML nastavite dodatne vtičnike in vsakemu dodate svojo besedilno vsebino znotraj razpona; nastavite dodatne razrede, če želite markize oblikovati drugače; in dodajte toliko novih stavkov mq (), kot jih imate. Prepričajte se, da jim klic mqRotate () sledi, da upravljate z oznako.

instagram story viewer