Megjegyzés:
MOZILLÁBAN csak DOCTYPE meghatározás nélkül működik!
Minden elemnek, egyedi id azonosítóval kell rendelkeznie
Mozillában nem fogadja el a pixelTop és pixelLeft meghatározást, csak a top és left a helyes
Mindaddig nem működik, még a span címkék közé nem írunk valamit.
Például: számokat 1, 2, 3, stb. betűt vagy szöveget.
De elegendő egyetlen pont ( . ) beírása is.
Ha, azt akarjuk, hogy a span címkék közé beírtak ne látszódjanak, a betű színét, állítsuk ugyan olyanra, mint a háttérszín.

XHTML fájl
<div id="animacio"> </div>
<script type="text/javascript" language="javascript" src="js_fájl_elérési_út.js"> </script>

Megjegyzés:
Animációs elemek stílusának meghatározásához, elég, ha csak az id azonosítóknak határozzuk meg a stílusát.
Például:
{ width: 20px; position: absolute; margin-top: 10px; margin-left: 10px; background-color: yellow; }

Ebben az esetben minden elem azonos stílussal rendelkezik, és egy forgó kerékhez hasonló animációt kapunk.

CSS fájl

#animacio {width: 780px; height: 300px; margin-left: 5px; border: 1px solid black;}

#spanabra1, #spanabra2, #spanabra3, #spanabra4, #spanabra5, #spanabra6, #spanabra7, #spanabra8, #spanabra9, #spanabra10, #spanabra11, #spanabra12 { width: 20px; position: absolute; margin-top: 20px; margin-left: 50px; }

.abra001 { background-color: yellow; }
.abra002 { background-color: #6c3; }
.abra003 { background-color: #fc9; }
.abra004 { background-color: aqua; }
.abra005 { background-color: red; }
.abra006 { background-color: green; }

Megjegyzés:
A kék színnel jelölt részeket, töröljük a programból, megáll a forgó mozgás animációja.
Mivel 12 objektumból áll programunk, egy óra számlap formátumot kapunk.
Ha törlöjük a class azonosítókra jellemző háttérszínt, egy óra számlapja lesz látható

JavaScript fájl
var dbszam = 12; //dbszam=darabszám
var ysz=80; //Y képletének szorzója
var xsz=80; //X képletének szorzója
var hamis=0; //Szerepe, hogy a feltételből, az else teljesűljön
var forgas =0; // Szimulálunk egy, nem létező feltételt

var Y = 260; //A számlap függőleges pozíciója "Ypos"
var X = 260; //A számlap vízszintes pozíciója "Xpos"

var ido = window.setTimeout ("szamlap(); " , 1000) ;

document.write('<span id="spanabra1" class="abra001">1</span>');
document.write('<span id="spanabra2" class="abra002">2</span>');
document.write('<span id="spanabra3" class="abra003">3</span>');
document.write('<span id="spanabra4" class="abra004">4</span>');
document.write('<span id="spanabra5" class="abra005">5</span>');
document.write('<span id="spanabra6" class="abra006">6</span>');
document.write('<span id="spanabra7" class="abra001">7</span>');
document.write('<span id="spanabra8" class="abra002">8</span>');
document.write('<span id="spanabra9" class="abra003">9</span>');
document.write('<span id="spanabra10" class="abra004">10</span>');
document.write('<span id="spanabra11" class="abra005">11</span>');
document.write('<span id="spanabra12" class="abra006">12</span>');

function szamlap() {

if (forgas) {hamis=0;}
else{ dbszam--; //++ esetében balra, - - esetében jobbra forog az animáció

//Körkörös pozíciók kiszámolása:
//Math.sin(-0.49+dbszam+i/1.9) képlettel Y koordinátán
//Math.cos(-0.49+dbszam+i/1.9) képlettel X koordinátán
//Kör átmérőjéhez, a képletet tetszőleges számmal szorozzuk (például: 80-al)
// Ha X és Y szorzója nem egyenlő, akkor ovális kört kapunk

spanabra1.style.top = Y+ ysz * Math.sin(-0.49+dbszam+0/1.9);
spanabra1.style.left = X+ xsz * Math.cos(-0.49+dbszam+0/1.9);

spanabra2.style.top = Y+ ysz * Math.sin(-0.49+dbszam+1/1.9);
spanabra2.style.left = X+ xsz * Math.cos(-0.49+dbszam+1/1.9);

spanabra3.style.top = Y+ ysz * Math.sin(-0.49+dbszam+2/1.9);
spanabra3.style.left = X+ xsz * Math.cos(-0.49+dbszam+2/1.9);

spanabra4.style.top = Y+ ysz * Math.sin(-0.49+dbszam+3/1.9);
spanabra4.style.left = X+ xsz * Math.cos(-0.49+dbszam+3/1.9);

spanabra5.style.top = Y+ ysz * Math.sin(-0.49+dbszam+4/1.9);
spanabra5.style.left = X+ xsz * Math.cos(-0.49+dbszam+4/1.9);

spanabra6.style.top = Y+ ysz * Math.sin(-0.49+dbszam+5/1.9);
spanabra6.style.left = X+ xsz * Math.cos(-0.49+dbszam+5/1.9);

spanabra7.style.top = Y+ ysz * Math.sin(-0.49+dbszam+6/1.9);
spanabra7.style.left = X+ xsz * Math.cos(-0.49+dbszam+6/1.9);

spanabra8.style.top = Y+ ysz * Math.sin(-0.49+dbszam+7/1.9);
spanabra8.style.left = X+ xsz * Math.cos(-0.49+dbszam+7/1.9);

spanabra9.style.top = Y+ ysz * Math.sin(-0.49+dbszam+8/1.9);
spanabra9.style.left = X+ xsz * Math.cos(-0.49+dbszam+8/1.9);

spanabra10.style.top = Y+ ysz * Math.sin(-0.49+dbszam+9/1.9);
spanabra10.style.left = X+ xsz * Math.cos(-0.49+dbszam+9/1.9);

spanabra11.style.top = Y+ ysz * Math.sin(-0.49+dbszam+10/1.9);
spanabra11.style.left = X+ xsz * Math.cos(-0.49+dbszam+10/1.9);

spanabra12.style.top = Y+ ysz * Math.sin(-0.49+dbszam+11/1.9);
spanabra12.style.left = X+ xsz * Math.cos(-0.49+dbszam+11/1.9);

}
ido = window.setTimeout ("szamlap(); " , 1000)
}
window.onload = szamlap;

 

 

 

 

 

 

 

 

 

 

 

 

Vissza a lap elejére