Kako narediti neprekinjeno slikovno oznako JavaScript

Tole JavaScript ustvari drsno oznako, v kateri se slike gibljejo vodoravno po območju prikaza. Ko vsaka slika izgine skozi eno stran območja zaslona, ​​se prebere na začetku serije slik. To ustvari neprekinjeno drsenje slik v sliki, ki se zanke - dokler imate dovolj slik, da zapolnite širino območja zaslona za oznako.

Vendar ima ta skript nekaj omejitev:

• Slike so prikazane v isti velikosti (tako širina kot višina). Če slike fizično niso enake velikosti, bodo vse velikosti spremenjene. Posledica tega je slaba kakovost slike, zato je najbolje, da svoje izvorne slike dosledno dimenzionirate.
• Višina slik se mora ujemati z višino, ki je določena za naličje, v nasprotnem primeru bodo slike spremenjene velikosti z enakim potencialom za zgoraj navedene slabe slike.
• Širina slike, pomnožena s številom slik, mora biti večja od širine oznake. Najlažji popravek za to, če ni dovolj slik, je, da samo slike ponovite v matriki, da zapolnite vrzel.
• Edina interakcija, ki jo ponuja ta skript, je zaustavitev drsenja, ko se miška premakne nad oznako, in nadaljevanje, ko miška premakne sliko. Kasneje opišemo modifikacijo, s katero lahko vse slike pretvorimo v povezave.
  instagram viewer
• Če imate na strani več oznak, vse tečejo z isto hitrostjo, tako da se bodo s prekrivanjem katerega koli od njih vsi nehali premikati.
• Potrebujete svoje slike. Tisti v primerih niso del te skripte.

Prvi, kopirajte naslednji JavaScript in ga shranite kot marquee.js.

Ta koda vsebuje dva slikovna niza (za obe sliki na primeru) in dva nova mq predmeta, ki vsebujeta informacije, ki bodo prikazane v teh dveh okvirih.

Lahko izbrišete enega od teh predmetov, drugega pa spremenite tako, da na svoji strani prikaže eno nepretrgano oznako ali ponovite te izjave, da dodate še več oznak.

Funkcija mqRotate mora biti imenovana mimo mqr, potem ko so oznake definirane kot, ki bodo upravljale rotacije.

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 ',
'graphics / img10.gif', 'graphics / img11.gif', 'graphics / img12.gif', '
graphics / 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 ','
graphics / img3.gif ',' graphics / img4.gif '];

funkcija start () {
nov mq ('m1', mqAry1,60);
nov mq ('m2', mqAry2,60); // ponovite za toliko fužin, kot je potrebno
mqRotate (mqr); // mora biti zadnji
}
window.onload = začetek;

// Nenehna slika
// avtorske pravice 24. julija 2008 avtorja Stephena Chapmana
// 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)
// komentarji) se uporablja brez kakršnih koli sprememb

var
mqr = []; funkcijo
mq (id, ary, wid) {this.mqo = document.getElementById (id); 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 = ary.length;
za (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; 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);}

Nato v glavno stran svoje strani dodajte to kodo:

Dodati moramo ukaz za tabelo sloga, da določimo, kako bo izgledala vsaka naša znamka.

Tu je koda, ki smo jo uporabili za tiste na primeru strani:

.marquee {položaj: sorazmerno;
preliv: skrit;
širina: 500px;
višina: 60px;
obroba: trda črna 1px;
}

Za svojo trgovino lahko spremenite katero koli od teh lastnosti; vendar mora ostati položaj: relativno.

Če ga imate, ga lahko vstavite v zunanji slog ali ga priložite oznake v glavi strani.

Naslednji korak je, da na svoji spletni strani določite div, kamor boste postavili slikovno sliko.

Prva od primernih znamk je uporabila to kodo:

Razred to povezuje s kodo tabele stilov, medtem ko je id tisto, kar bomo uporabili v novem klicu mq () za pritrditev oznake slik.

Končna stvar, ki jo morate sestaviti, je, da poskrbite, da bo vaša koda za dodajanje predmeta mq v vaš JavaScript, ko stran naloži prave vrednosti.

Tukaj je videti ena od primernih izjav:

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

• M1 je id naše oznake div, ki bo prikazala oznako.
• mqAry1 je sklic na niz slik, ki bodo prikazane v sliki.
• Končna vrednost 60 je širina naših slik (slike se bodo pomikale od desne proti levi in ​​tako je višina enaka, kot smo jo opredelili v obrazcu za slog).

Za dodajanje dodatnih oznak smo samo nastavili dodatne matrične slike, dodatne div v našem HTML-ju, morda tudi nastavili dodatni razredi, da bi se markizirali drugače, in dodali toliko novih stavkov mq (), kot jih imamo markize. Prepričati se moramo le, da jim klic mqRotate () sledi, da upravljajo oznake za nas.

Obstajata samo dve spremembi, da se slike na sliki pretvorijo v povezave.

Najprej spremenite matrično sliko iz matrike slik v matriko nizov, kjer vsak notranji niz obsega sliko v položaju 0 in naslov povezave v položaju 1.

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

Druga stvar je nadomestiti naslednje za glavni del skripta:

// Nenehna slika s povezavami
// avtorske pravice 21. septembra 2008 avtorja Stephena Chapmana
// 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)
// komentarji) se uporablja brez kakršnih koli sprememb
var mqr = []; funkcija mq (id, ary, wid) {this.mqo = document.getElementById (id); 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 = ary.length; za (var i = 0; i -1; j--) {maxa = mqr [j] .ary.length; za (var i = 0; i

Ostalo, kar morate storiti, ostaja enako, kot je opisano za različico modela brez povezav.