Kā padarīt JavaScript nepārtrauktu attēlu marķieri

Šis JavaScript izveido ritināmo telti, kurā attēlu apgabals, kurā attēli pārvietojas horizontāli pa displeja laukumu. Tā kā katrs attēls pazūd vienā displeja laukuma pusē, tas tiek nolasīts attēlu sērijas sākumā. Tas rada nepārtrauktu attēlu ritināšanu pakāpiena telpā, kurā tiek cilpotas cilpas, ja vien jums ir pietiekami daudz attēlu, lai aizpildītu telts laukuma platumu.

Šim skriptam tomēr ir daži ierobežojumi:

• Attēli tiek parādīti tādā pašā izmērā (gan platumā, gan augstumā). Ja attēli nav fiziski vienādi, tad tiem visiem tiks mainīts lielums. Tas var izraisīt sliktu attēla kvalitāti, tāpēc vislabāk ir vienmērīgi izmērīt avota attēlus.
• Attēlu augstumam jāsakrīt ar telts uzstādīto augstumu, pretējā gadījumā attēlu lielums tiks mainīts ar tādu pašu potenciālu sliktiem attēliem, kas minēti iepriekš.
• Attēla platumam, kas reizināts ar attēlu skaitu, jābūt lielākam par telts platumu. Vienkāršākais risinājums, ja attēlu nav pietiekami, ir vienkārši atkārtot masīva attēlus, lai aizpildītu plaisu.
instagram viewer
• Vienīgā mijiedarbība, ko piedāvā šis skripts, ir ritināšanas apturēšana, kad pele tiek pārvietota virs telts, un atsākšana, kad pele pārvietojas no attēla. Vēlāk mēs aprakstīsim modifikāciju, kuru var veikt, lai visus attēlus pārveidotu saitēs.
• Ja vienā lappusē ir vairākas norises vietas, tās visas darbojas ar vienādu ātrumu, tāpēc, pārvietojot jebkuru no tām, tās visas pārtrauks kustēties.
• Jums ir nepieciešami savi attēli. Piemēros esošie nav šī skripta daļa.

Pirmais, nokopējiet šo JavaScript un saglabājiet to kā marquee.js.

Šis kods satur divus attēlu masīvus (diviem marķējumiem parauga lapā), kā arī divus jaunus mq objektus, kas satur informāciju, kas jāparāda šajos divos marķīšos.

Jūs varat izdzēst vienu no šiem objektiem un mainīt otru, lai lapā parādītu vienu nepārtrauktu marķīzi, vai arī atkārtot šos paziņojumus, lai pievienotu vēl vairāk marķīzi.

Pēc tam, kad marķējumi ir definēti kā tādi, kas darbosies ar rotācijām, funkcija mqRotate ir jāsauc par ietošo mqr.

var
mqAry1 = ['graphics / img0.gif', 'graphics / img1.gif', 'graphics / img2.gif', '
grafika / 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', '
grafika / 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 ',' grafika / img4.gif '];

funkcijas sākums () {
jauns mq ('m1', mqAry1,60);
jauns mq ('m2', mqAry2,60); // atkārtojiet tik daudz laukumu, cik nepieciešams
mqRotate (mqr); // jānāk pēdējam
}
logs.ielādēt = sākums;

// Nepārtraukta attēla telts
// autortiesības Stefans Čepmens, 2008. gada 24. jūlijs
// http://javascript.about.com
// tiek piešķirta atļauja izmantot šo Javascript savā tīmekļa lapā
// ar nosacījumu, ka viss kods zem šī skripta (ieskaitot šo)
// komentāri) tiek izmantots bez jebkādām izmaiņām

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;
par (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'absolūts'; 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; for (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ar.garumu; par (var i = 0; imqr [j] .ar [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [j] .ar [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);}

Tālāk pievienojiet šo kodu savas lapas sadaļai:

Mums ir jāpievieno stila lapas komanda, lai definētu, kā izskatīsies katrs mūsu marķīzs.

Šis ir kods, kuru mēs izmantojām tiem, kas ir piemēru lapā:

.marquee {amats: radinieks;
pārpilde: slēpta;
platums: 500 pikseļi;
augstums: 60 pikseļi;
apmale: melni melns 1px;
}

Jūs varat mainīt jebkuru no šīm īpašībām savam telts objektam; tomēr tam jāpaliek amats: radinieks.

Varat to ievietot ārējā stila lapā, ja jums tāda ir, vai arī to apzīmēt tagi jūsu lapas galvā.

Nākamais solis ir definēt dalījumu savā tīmekļa lapā, kur jūs ievietosit attēlu marķieri.

Pirmajā no parauglaukumiem tika izmantots šis kods:

Klase to saista ar stila kodu, bet id ir tas, ko mēs izmantosim jaunajā mq () aicinājumā, lai pievienotu attēlu marķieri.

Visbeidzot, lai to visu saliktu kopā, pārliecinieties, vai jūsu kodā mq objekta pievienošanai jūsu JavaScript pēc lapas ielādes ir norādītas pareizās vērtības.

Lūk, kāds izskatās viens no piemēriem:

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

• M1 ir mūsu div birkas ID, kas parādīs pasākumu.
• mqAry1 ir atsauce uz attēlu masīvu, kas tiks parādīts teltī.
• Gala vērtība 60 ir mūsu attēlu platums (attēli ritinās no labās uz kreiso pusi, tāpēc augstums ir tāds pats, kā mēs definējām stila lapā).

Lai pievienotu papildu pasākumus, mēs vienkārši izveidojām papildu attēlu masīvus, papildu divs mūsu HTML, iespējams, izveidotus papildu klases, lai veidotu marķēzes atšķirīgi, un pievienotu tik daudz jaunu mq () paziņojumu, cik mums ir telšu vietas. Mums vienkārši jāpārliecinās, ka mqRotate () izsaukums seko viņiem, lai darbinātu mums marķīzi.

Ir nepieciešams veikt tikai divas izmaiņas, lai attēlus telts telpā izveidotu saites.

Pirmkārt, nomainiet savu attēlu masīvu no attēlu masīva uz masīvu masīvu, kur katrs iekšējais bloks sastāv no attēla pozīcijā 0 un saites adreses 1. pozīcijā.

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

Otrkārt, galvenā skripta daļa ir jāaizstāj ar šo:

// Nepārtraukta attēla telts ar saitēm
// autortiesības Stefans Čepmens, 2008. gada 21. septembris
// http://javascript.about.com
// tiek piešķirta atļauja izmantot šo Javascript savā tīmekļa lapā
// ar nosacījumu, ka viss kods zem šī skripta (ieskaitot šo)
// komentāri) tiek izmantots bez jebkādām izmaiņām
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; par (var i = 0; i -1; j--) {maxa = mqr [j] .ar.garumu; par (var i = 0; i

Pārējais, kas jums jādara, paliek tas pats, kas aprakstīts telts versijai bez saitēm.