Tento JavaScript vytvoří rolovací rámeček, ve kterém se obrazové oblasti, kde se obrazy pohybují vodorovně přes zobrazovanou oblast. Jak každý obraz zmizí přes jednu stranu oblasti zobrazení, je načten na začátku série obrázků. Tím se vytvoří souvislý posun obrázků v rámečku, který se opakuje - pokud máte dostatek obrázků, aby vyplnily šířku oblasti zobrazení rámečku.
Tento skript však má několik omezení:
- Obrázky jsou zobrazeny ve stejné velikosti (šířka i výška). Pokud obrázky nejsou fyzicky stejné velikosti, budou všechny změněny. To může mít za následek špatnou kvalitu obrazu, takže je nejlepší důsledně měnit velikost zdrojových obrázků.
- Výška obrazů se musí shodovat s výškou nastavenou pro rámeček, jinak budou obrázky změněny se stejným potenciálem pro výše uvedené špatné obrázky.
- Šířka obrázku vynásobená počtem obrázků musí být větší než šířka rámečku. Nejjednodušší oprava tohoto problému, pokud není dostatek obrázků, je opakovat obrázky v poli, aby se vyplnila mezera.
- Jedinou interakcí, kterou tento skript nabízí, je zastavení posouvání, když se myš pohybuje nad rámečkem, a obnovení, když se myš pohybuje mimo obraz. Později popisujeme úpravu, kterou lze převést všechny obrázky na odkazy.
- Máte-li na stránce více značek, všechny běží stejnou rychlostí, takže při přechodu na některou z nich se všechny přestanou pohybovat.
- Potřebujete vlastní obrázky. Ti v příkladech nejsou součástí tohoto skriptu.
Image Marquee JavaScript Code
První zkopírujte následující JavaScript a uložte jej jako marquee.js.
Tento kód obsahuje dvě obrazová pole (pro dvě markery na vzorové stránce) a dva nové objekty mq obsahující informace, které mají být zobrazeny v těchto dvou markérech.
Můžete jeden z těchto objektů smazat a změnit jiný tak, aby se na stránce zobrazoval jeden souvislý rámeček, nebo opakovat tyto příkazy a přidat další markery.
Funkce mqRotate musí být nazývána projíždějící mqr poté, co jsou značky definovány tak, že budou zpracovávat rotace.
varmqAry1 = ['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 '];
funkce start () {
nová mq ('m1', mqAry1,60);
new mq ('m2', mqAry2,60); // opakujte pro libovolný počet polí
mqRotate (mqr); // musí přijít poslední
}
window.onload = start;
// Nepřetržitý obrazový rámeček
// copyright 24. července 2008 Stephen Chapman
// http://javascript.about.com
// je povoleno používat tento Javascript na vaší webové stránce
// za předpokladu, že veškerý níže uvedený kód v tomto skriptu (včetně těchto
// comments) se používá bez jakýchkoli změn
var mqr = []; funkce
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;
pro (var
i = 0; ithis.mqo.ary [i] .src = ary [i]; this.mqo.ary [i] .style.position =
'absolutní'; 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; pro (var j = mqr.length - 1; j
> -1; j--) {maxa = mqr [j] .ary.length; pro (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);}
Poté do hlavní části stránky přidejte následující kód:
Přidejte příkaz stylů
Musíme definovat příkaz stylů, abychom definovali, jak bude vypadat každá z našich značek.
Zde je kód, který jsme použili pro kódy uvedené na vzorové stránce:
.marquee {pozice: relativní;
přetečení: skryté;
šířka: 500px;
výška: 60px;
rámeček: plná černá 1px;
}
Můžete změnit kteroukoli z těchto vlastností pro svůj stan; musí však zůstat poloha: relativní.
Můžete jej umístit do svého externího seznamu stylů, pokud jej máte, nebo jej vložit mezi značky v záhlaví stránky.
Určete, kam umístíte markýzu
Dalším krokem je definování div na vaší webové stránce, kam umístíte rámeček obrázků.
První z ukázkových marků použil tento kód:
Třída to spojí s kódem šablony stylů, zatímco id je to, co použijeme v novém volání mq () pro připojení rámečku obrázků.
Zajistěte, aby váš kód obsahoval správné hodnoty
Poslední věc, kterou je třeba dát dohromady, je zajistit, aby váš kód pro přidání objektu mq do JavaScriptu po načtení stránky obsahoval správné hodnoty.
Jak vypadá jeden z příkladů:
nová mq ('m1', mqAry1,60);
- M1 je id naší značky div, která zobrazí markýzu.
- mqAry1 je odkaz na pole obrázků, které budou zobrazeny v rámečku.
- Konečná hodnota 60 je šířka našich obrázků (obrázky se posouvají zprava doleva, takže výška je stejná, jak jsme definovali v listu stylů).
Abychom přidali další značky, vytvořili jsme pouze další pole obrázků, další divy v našem HTML, případně nastavené další třídy, aby se styl značek odlišoval, a přidejte tolik nových příkazů mq (), kolik máme markýzy. Musíme se jen ujistit, že volání mqRotate () je následuje, aby pro nás fungovaly markýzy.
Vytváření rámečků do odkazů
Chcete-li, aby se obrázky v rámečku staly odkazy, musíte provést pouze dvě změny.
Nejprve změňte své obrazové pole z pole obrazů na pole polí, kde každé z interních polí sestává z obrázku na pozici 0 a adresy odkazu v poloze 1.
var mqAry1 = [
['graphics / img0.gif', 'blcmarquee1.htm'],
['graphics / img1.gif', 'blclockm1.htm'], ...
['graphics / img14.gif', 'bltypewriter.htm']];
Druhou věcí, kterou musíte udělat, je nahradit hlavní částí skriptu následující:
// Nepřetržitý obrazový rámeček s odkazy
// copyright 21. září 2008 Stephen Chapman
// http://javascript.about.com
// je povoleno používat tento Javascript na vaší webové stránce
// za předpokladu, že veškerý níže uvedený kód v tomto skriptu (včetně těchto
// comments) se používá bez jakýchkoli změn
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 = ary.length; pro (var i = 0; i
Zbytek toho, co musíte udělat, zůstává stejný jako u verze markýzy bez odkazů.