toto JavaScript vytvorí posúvaciu oblasť, v ktorej sa obrazové oblasti pohybujú horizontálne cez zobrazenú oblasť. Keď každý obrázok zmizne cez jednu stranu oblasti displeja, je prečítaný na začiatku série obrázkov. Takto sa vytvorí nepretržité posúvanie obrázkov v rámčeku, ktorý sa opakuje - pokiaľ máte dostatok obrázkov na vyplnenie šírky oblasti zobrazenia rámčeka.
Tento skript má však niekoľko obmedzení:
- Obrázky sa zobrazujú v rovnakej veľkosti (šírka aj výška). Ak obrázky nie sú fyzicky rovnaké, veľkosť sa zmení. To môže mať za následok zlú kvalitu obrazu, takže je najlepšie konzistentne veľkosti zdrojových obrázkov.
- Výška obrázkov sa musí zhodovať s výškou nastavenou pre markízu, v opačnom prípade budú obrázky zmenené s rovnakým potenciálom pre zlé obrázky uvedené vyššie.
- Šírka obrázka vynásobená počtom obrázkov musí byť väčšia ako šírka rámika. Najjednoduchšia oprava tohto problému, ak nie je dostatok obrázkov, je iba opakovať obrázky v poli, aby sa vyplnila medzera.
- Jediná interakcia, ktorú tento skript ponúka, je zastavenie posúvania, keď sa myš pohybuje po markete, a obnovenie, keď sa myš pohybuje mimo obrazu. Neskôr opíšeme modifikáciu, ktorú je možné previesť na všetky obrázky na odkazy.
- Ak máte na stránke viac značiek, všetky sa spúšťajú rovnakou rýchlosťou, takže pri pohybe myšou nad nimi sa všetky prestanú pohybovať.
- Potrebujete svoje vlastné obrázky. Tí v príkladoch nie sú súčasťou tohto skriptu.
Obrázok kódu značky Marquee
Najprv skopírujte nasledujúci JavaScript a uložte ho ako marquee.js.
Tento kód obsahuje dve obrazové polia (pre dve markery na vzorovej stránke), ako aj dva nové objekty mq obsahujúce informácie, ktoré sa majú zobraziť v týchto dvoch markéroch.
Jeden z týchto objektov môžete odstrániť a zmeniť druhý tak, aby sa na vašej stránke zobrazoval jeden súvislý okraj, alebo zopakujte tieto výroky a pridajte ešte viac značiek.
Funkcia mqRotate sa musí nazývať prechádzajúca mqr potom, čo sú značky definované ako tie, ktoré spracúvajú rotácie.
varmqAry1 = [ 'grafika / img0.gif', 'grafika / img1.gif', 'grafika / img2.gif', '
grafika / img3.gif '' grafika / img4.gif ',' grafika / img5.gif ',' grafika /
img6.gif ',' grafika / img7.gif ',' grafika / img8.gif ',' grafika / img9.gif '
'Grafika / img10.gif', 'grafika / img11.gif', 'grafika / img12.gif', '
grafika / img13.gif ',' grafika / img14.gif '];
var
mqAry2 = [ 'grafika / img5.gif', 'grafika / img6.gif', 'grafika / img7.gif', '
grafika / img8.gif '' grafika / img9.gif ',' grafika / img10.gif ',' grafika /
img11.gif '' grafika / img12.gif ',' grafika / img13.gif ',' grafika / img14.
gif '' grafika / img0.gif ',' grafika / img1.gif ',' grafika / img2.gif ','
grafika / img3.gif ',' grafika / img4.gif '];
funkcia start () {
nová mq ('m1', mqAry1,60);
nová mq ('m2', mqAry2,60); // opakujte toľko znakov, koľko potrebujete
mqRotate (mqr); // musí prísť posledný
}
window.onload = start;
// Nepretržitá rámik obrázka
// copyright 24. júla 2008, Stephen Chapman
// http://javascript.about.com
// je povolené používať tento Javascript na vašej webovej stránke
// za predpokladu, že všetky kódy uvedené nižšie v tomto skripte (vrátane týchto
// comments) sa používa bez akýchkoľvek zmien
var mqr = []; funkcie
mq (id, ary, wid) {this.mqo = document.getElementById (id); var heit =
this.mqo.style.height; this.mqo.onmouseout = funkcia ()
{mqRotate (mqr);}; this.mqo.onmouseover = funkcia ()
{clearTimeout (mqr [0] .TO);}; this.mqo.ary = []; var maxw = arylength;
pre (var
i = 0; ithis.mqo.ary [i] = .src ary [i]; this.mqo.ary [i] .style.position =
, Absolútna '; 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);}
function mqRotate (mqr) {if (! mqr) return; pre (var j = mqr.length-1; j
> -1; j -) {maxa = mqr [j] .arylenthth; pre (var i = 0; imqr [j] .ary [i] .style; x.left = (parseInt (x.left, 10) -1) + 'px';} var y =
mqr [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);}
Potom do sekcie hlavičky stránky pridajte nasledujúci kód:
Pridajte príkaz štýlov
Potrebujeme pridať príkaz so šablónou štýlov na definovanie toho, ako bude vyzerať každá z našich značiek.
Tu je kód, ktorý sme použili pre kódy uvedené na vzorovej stránke:
.marquee {pozícia: relatívna;
pretečenie: skryté;
šírka: 500px;
výška: 60px;
okraj: plná čierna 1px;
}
Ktorúkoľvek z týchto vlastností môžete zmeniť pre svoj stan; musí však zostať poloha: relatívna.
Môžete ho umiestniť do svojho vonkajšieho štýlu, ak ho máte, alebo ho medzi sebou prikladať v hlavičke vašej stránky.
Definujte, kam umiestnite markízu
Ďalším krokom je definovanie prvku div na svojej webovej stránke, na ktorý umiestnite rámik obrázkov.
Tento kód použili prvé z príkladov:
Trieda to priradí ku kódu šablóny so štýlmi, zatiaľ čo id je to, čo použijeme pri novom volaní mq () na priloženie stola snímok.
Zaistite, aby váš kód obsahoval správne hodnoty
Poslednou vecou, ktorá všetko musí dať dohromady, je zabezpečiť, aby váš kód na pridanie objektu mq do JavaScriptu po načítaní stránky obsahoval správne hodnoty.
Ako vyzerá jeden z príkladov:
nová mq ('m1', mqAry1,60);
- M1 je ID našej značky div, ktorá zobrazí markízu.
- mqAry1 je odkaz na pole obrázkov, ktoré sa zobrazia v rámčeku.
- Konečná hodnota 60 je šírka našich obrázkov (obrázky sa posúvajú sprava doľava, takže výška je rovnaká, ako sme definovali v šablóne so štýlmi).
Aby sme pridali ďalšie značky, práve sme nastavili ďalšie obrázkové polia, ďalšie divy v našom HTML, prípadne nastavené ďalšie triedy, aby sa štýly zmenili inak, a pridajte toľko nových príkazov mq (), aké máme stany. Potrebujeme sa len ubezpečiť, že ich zavolá mqRotate (), aby pre nás fungovala značka.
Vytváranie záberov do odkazov
Musíte urobiť iba dve zmeny, aby sa obrázky v rámčeku stali prepojeniami.
Najskôr zmeňte svoje obrazové pole z poľa obrazov na pole polí, kde každé z vnútorných polí pozostáva z obrázka na pozícii 0 a adresy odkazu v pozícii 1.
var mqAry1 = [
[ 'Grafika / img0.gif', 'blcmarquee1.htm'],
[ 'Grafika / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];
Druhou vecou, ktorú treba urobiť, je nahradiť hlavnou časťou skriptu:
// Nepretržitá snímka obrázka s odkazmi
// copyright 21. septembra 2008, Stephen Chapman
// http://javascript.about.com
// je povolené používať tento Javascript na vašej webovej stránke
// za predpokladu, že všetky kódy uvedené nižšie v tomto skripte (vrátane týchto
// comments) sa používa bez akýchkoľvek zmien
var mqr = []; function 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 = arylength; pre (var i = 0; i
Zvyšok toho, čo musíte urobiť, zostáva rovnaký ako vo verzii markízy bez odkazov.