Kaip sukurti „JavaScript“ nepertraukiamo vaizdo ženklą

Tai „JavaScript“ sukuria slinkties ženklą, kuriame vaizdų sritis, kurioje vaizdai horizontaliai juda per ekrano sritį. Kiekvienas vaizdas išnyksta per vieną ekrano pusės kraštą, jis nuskaitomas vaizdų serijos pradžioje. Tai sukuria nenutrūkstamą vaizdų slinktį palapinėje, kurios kilpa yra tol, kol turite pakankamai vaizdų, kad užpildytumėte palapinės rodymo srities plotį.

Tačiau šis scenarijus turi keletą apribojimų:

• Vaizdai rodomi vienodo dydžio (tiek pločio, tiek aukščio). Jei atvaizdai nėra fiziškai vienodo dydžio, jie visi bus keičiami. Dėl to vaizdo kokybė gali būti prasta, todėl geriausia nuosekliai keisti šaltinio vaizdus.
• Vaizdų aukštis turi atitikti palapinei nustatytą aukštį, kitaip atvaizdų dydis bus pakeistas tokiu pat aukščiau minėtu prastų vaizdų potencialu.
• Paveikslėlio plotis, padaugintas iš vaizdų skaičiaus, turi būti didesnis nei palapinės plotis. Jei atvaizdų nepakanka, tai paprasčiausia ištaisyti, jei norite užpildyti spragą, tiesiog pakartokite masyvo atvaizdus.
• Vienintelė sąveika, kurią siūlo šis scenarijus, yra slinkties sustabdymas, kai pelė perkeliama ant palapinės, ir atnaujinimas, kai pele juda nuo vaizdo. Vėliau aprašome modifikaciją, kuri gali būti atlikta norint paversti visus vaizdus nuorodomis.
  instagram viewer
• Jei puslapyje yra kelios palapinės, jos visos važiuoja tuo pačiu greičiu, todėl pelės žymeklį viršijus bet kurią iš jų visos nustos judėti.
• Jums reikia savo vaizdų. Pavyzdžiuose pateikti duomenys nėra šio scenarijaus dalis.

Pirmiausia nukopijuokite šią „JavaScript“ ir išsaugokite kaip marquee.js.

Šiame kode yra dvi vaizdų masyvai (dviem pavyzdžių puslapyje esančioms markizėms), taip pat du nauji mq objektai, turintys informaciją, kuri turi būti rodoma tose dviejose palapinėse.

Galite ištrinti vieną iš tų objektų, o kitą pakeisti, kad jūsų puslapyje būtų rodoma viena tęstinė palapinė, arba pakartoti tuos teiginius, kad pridėtumėte dar daugiau palapinių.

Funkcija „mqRotate“ turi būti vadinama pravažiuojančia mqr po to, kai žymekliai bus apibrėžti kaip tokie, kurie valdys sukimąsi.

var
mqAry1 = ['graphics / img0.gif', 'graphics / img1.gif', 'graphics / img2.gif', '
graphics / img3.gif ',' graphics / img4.gif ',' graphics / img5.gif ',' graphics /
„img6.gif“, „graphics / img7.gif“, „graphics / img8.gif“, „graphics / img9.gif“,
'grafika / img10.gif', 'graphics / img11.gif', 'graphics / img12.gif', '
grafika / img13.gif ',' graphics / img14.gif '];

var
mqAry2 = ['graphics / img5.gif', 'graphics / img6.gif', 'graphics / img7.gif', '
graphics / img8.gif ',' graphics / img9.gif ',' graphics / img10.gif ',' graphics /
img11.gif ',' graphics / img12.gif ',' graphics / img13.gif ',' graphics / img14.
„gif“, „graphics / img0.gif“, „graphics / img1.gif“, „graphics / img2.gif“, „
grafika / img3.gif ',' graphics / img4.gif '];

funkcijos pradžia () {
naujas mq ('m1', mqAry1,60);
naujas mq ('m2', mqAry2,60); // pakartokite tiek kartų, kiek reikia
mqRotate (mqr); // turi ateiti paskutinis
}
langas.įkelti = pradėti;

// Ištisinė vaizdų palapinė
// autorių teisės 2008 m. liepos 24 d., autorius Stephenas Chapmanas
// http://javascript.about.com
// Suteiktas leidimas naudoti šį „Javascript“ savo tinklalapyje
// su sąlyga, kad visas žemiau esantis kodas šiame scenarijuje (įskaitant šiuos)
// komentarai) vartojami be pakeitimų

var
mqr = []; funkcija
mq (id, ary, wid) {this.mqo = document.getElementById (id); 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 = ary.length;
už (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; tai.mqo.ary [i] .style.pozicija =
'absoliutus'; this.mqo.ary [i] .style.left = (wid * i) + 'px';
this.mqo.ary [i] .style.width = wid + 'px'; tai.mqo.ary [i] .style.height =
heit; this.mqo.appendChild (this.mqo.ary [i]);} mqr.push (this.mqo);}
funkcija mqRotate (mqr) {if (! mqr) return; už (var j = mqr ilgis - 1; j
> -1; j--) {maxa = mqr [j] .aris ilgis; už (var i = 0; imqr [j] .ar [i] .stilas; x.left = („parseInt“ (x.kairė, 10) -1) + 'px';} var y =
mqr [j] aris [0] stilius; 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);}

Tada pridėkite šį kodą savo puslapio antraštėje:

Turime pridėti stiliaus lapo komandą, kad apibrėžtume, kaip atrodys kiekviena mūsų palapinė.

Štai kodas, kurį mes naudojome tiems, kurie yra pavyzdžio puslapyje:

.marquee {padėtis: giminaitis;
perteklius paslėptas;
plotis: 500 pikselių;
aukštis: 60 taškų;
kraštinė: vientisa juoda 1px;
}

Savo palapinei galite pakeisti bet kurią iš šių savybių; vis dėlto turi likti padėtis: giminaitis.

Galite įterpti jį į savo išorės stiliaus lapą, jei tokį turite, arba įterpti žymas jūsų puslapio galvoje.

Kitas žingsnis - apibrėžkite savo tinklalapio skyrių, kuriame įdėsite vaizdų palapinę.

Pirmajame pavyzdyje buvo naudojamas šis kodas:

Klasė tai susieja su stiliaus lentelės kodu, o ID bus tas, kurį naudosime naujame kvietime „mq ()“, kad pridėtume vaizdų ženklą.

Galiausiai, visa tai sudėjus, įsitikinkite, kad jūsų kode, kad „mq“ objektą pridėtumėte „JavaScript“, kai puslapis įkeliamas, yra tinkamos vertės.

Štai kaip atrodo vienas iš pavyzdžių teiginių:

naujas mq ('m1', mqAry1,60);

• M1 yra mūsų „div“ žymos, kuri parodys palapinę, ID.
• „mqAry1“ yra nuoroda į vaizdų masyvą, kuris bus rodomas palapinėje.
• Galutinė vertė 60 yra mūsų vaizdų plotis (vaizdai slinks iš dešinės į kairę, taigi aukštis yra toks pat, kaip ir apibrėžėme stiliaus lape).

Norėdami pridėti papildomų palapinių, mes tiesiog nustatėme papildomus vaizdų masyvus, papildomus dalykus mūsų HTML, galbūt, nustatytus papildomų klasių, kad marquees būtų skirtingas stilius, ir pridėkite tiek naujų mq () teiginių, kiek turime palapinės. Mes tiesiog turime įsitikinti, kad „mqRotate ()“ skambutis seka po jų, kad jie galėtų valdyti palapines.

Yra tik du pakeitimai, kuriuos turite atlikti, kad vaizdai palapinėje taptų nuorodomis.

Pirmiausia pakeiskite savo vaizdų masyvą iš vaizdų masyvo į masyvų masyvą, kur kiekvieną vidinį masyvą sudaro vaizdas 0 padėtyje ir nuorodos adresas 1 padėtyje.

var mqAry1 = [
['graphics / img0.gif', 'blcmarquee1.htm'],
['grafika / img1.gif', 'blclockm1.htm'], ...
['grafika / img14.gif', 'bltypewriter.htm']];

Antras dalykas, kurį reikia padaryti, yra pakeisti pagrindinę scenarijaus dalį:

// Ištisinė vaizdų palapinė su nuorodomis
// autorių teisės 2008 m. rugsėjo 21 d., autorius Stephenas Chapmanas
// http://javascript.about.com
// Suteiktas leidimas naudoti šį „Javascript“ savo tinklalapyje
// su sąlyga, kad visas žemiau esantis kodas šiame scenarijuje (įskaitant šiuos)
// komentarai) vartojami be pakeitimų
var mqr = []; funkcija mq (id, ary, wid) {this.mqo = document.getElementById (id); 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 = ary.length; už (var i = 0; i -1; j--) {maxa = mqr [j] .aris ilgis; už (var i = 0; i

Visa kita, ką jums reikia padaryti, išlieka ta pati, kaip aprašyta palapinės versijoje be nuorodų.