JavaScript tip – stopa pohybu myši

3. července 2001

•

Při procházení některými internetovými stránkami se můžeme setkat se zajímavým efektem – stopou za pohybem myši. Efekt bývá často laděn do specifické nálady, např. v zimě je často k vidění stopa z vloček sněhu. Dnes vám ukáži, jak tento efekt vytvořit. Bude se vám samozřejmě hodit alespoň základní znalost JavaScriptu.

Postup je samozřejmě funkční v obou dominantních prohlížečích. Na ukázku toho, co si dnes vytvoříme, se podívejte zde.

Stopa je tvořena pěti obrázky (ke stáhnutí zde), které jsou uloženy v prvcích div s absolutními souřadnicemi. Na začátku je to pouze prázdný obrázek.

Každý tag má samozřejmě unikátní ID. Pokračujme k samotnému skriptu. Nejprve je nutné vytvořit objekty typu Image(), které budou reprezentovat prvky trailSpirite1-5. To provedeme pomocí cyklu for a metody eval, obojí zde bylo už popisováno.

for (i = 1; i < 6; i++) {
eval(‚castStopy‘ + i + ‚= new Image(28,36);‘);
eval(‚castStopy‘ + i + „.src = ‚obr“+ i +“.gif‘;“);
}
var isNS = (navigator.appName == „Netscape“);// podminka browseru
layerRef = (isNS) ? „document“ : „document.all“;
styleRef = (isNS) ? „“ : „.style“;
var queue = new Array(); // konstruktor pole
var pocetCasti = 5;

Metoda eval vrátí příkazy tvaru castStopy1 = new Image(28,36); a castStopy1.src = ‚obr1.gif‘;. Dále je definováno také několik globálních proměnných. Do objektů vložíme obrázky pojmenované po řadě obr1-5.

isNS – logická proměnná, pokud je browser Netscape, je pravda, jinak nepravda
layerRef – pro Netscape document, pro Internet Explorer document.all
styleRef – CSS styl objektu, v Netscape se nepoužívá .style
queue – pole, do kterého budeme později přiřazovat objekty
pocetCasti – počet částí stopy, (v tomto případě 5)

Nyní vytvoříme konstruktor objektů stopy.

function constructObject(cislo) {
this.stopaID = ‚trailSprite‘ + cislo;// nazev objektu div ve strance
this.obrazek = ‚trailSprite‘ + cislo + ‚img‘;// nazev obrazku
this.tatoStopa = 1;
this.animujStopu = animujStopu;// metoda pro vytvoreni stopy
}

Objekt bude mít několik vlastností a metodu s následujícím zdrojem (předem doporučuji zvýšenou pozornost při psaní apostrofů a uvozovek):

Metoda nastaví pro tagy div správné obrázky. Proběhne pouze pod podmínkou, že vlastnost tatoStopa aktuálního objektu je menší než 6. Dále je použita opět podmínka pro rozlišení prohlížeče kvůli rozdílnému DOM v browserech, v Netscape musí být v případě „tag v tagu“ použito document.tag1.document.tag2). V části pro Internet Explorer proběhne příkaz document.trailSprite1img.src = castStopy2.src. Operátor [ ] odpovídá operátoru ".", ale v případě obrázků se častěji používá [ ]. Poté se zvětší vlastnost tatoStopa o 1. V případě, že nebude splněna první podmínka, nastaví se aktuálnímu objektu viditelnost na skryto.

Teď je potřeba vytvořit funkci, která vytvoří pole objektů queue:

function init() {
for(i = 0; i < pocetCasti; i++) queue[i] = new constructObject(i + 1) ;
if (isNS) { document.captureEvents(Event.MOUSEMOVE); }
document.onmousemove = processMouse;
setInterval(„processAnim();“,5);
}

Funkce tedy vytvoří objekty queue[0-4] pomocí konstruktoru constructObject(). Další příkaz je nutný pro Netscape – říká mu, aby zaznamenával danou událost dříve než celá proběhne. Událost musí být zapsána velkými písmeny. Poté zavolá na pohyb myší funkci processMouse (viz. níže). Nakonec nastaví volání funkce processAnim() (viz. níže) v intervalu 5 ms.

Funkce processAnim je velice jednoduchá. Pro všechny objekty z pole queue zavolá jejich metodu animujStopu:

function processAnim() {
for(i = 0; i < pocetCasti; i++) queue[i].animujStopu();
}

Funkce processMouse() je už opět složitější a nastavuje pozici objektů.

Opět je rozdělená na část pro Netscape a pro Internet Explorer. Pro oba prohlížeče známým způsobem nastavuje pozici objektu 10 bodů okolo kurzoru. Stávající objekt je určen pomocí funkce shuffleQueue(), která mění pořadí objektů.

function shuffleQueue() {
lastItemPos = queue.length – 1;// pomocna promenna
lastItem = queue[lastItemPos];// pomocna promenna
for (i = lastItemPos; i > 0; i–) queue[i] = queue[i – 1];
queue[0] = lastItem;
queue[0].tatoStopa = 1;
eval(layerRef + ‚.‘ + queue[0].stopaID + styleRef + ‚.visibility = „visible“‚);// zviditelneni
return queue[0].stopaID;
}

Funkce posune pořadí objektů – z queue[3] bude queue[2] apod. pomocí vlastnosti lenght, která vrací délku (počet položek) pole. Pak nastaví vlastnost queue[0] tatoStopa na 1 (aby byla opět splněna podmínka metody animuj stopu). Nastaví také vlastnost visibility téhož objektu na visible. Vrací název objektu queue[0].

Poslední dvě popisované funkce jsou volány při každé změně polohy kurzoru (událost OnMouseMove). Proto se také při každém pohybu myši mění obrázky ve stopě. Metoda animujStopu každých 5 ms přiřazuje obrázky, nebo objekty div skrývá. Tím je tvořen požadovaný efekt stopy.

Skript použijeme zavoláním funkce init() ze stránky.