Folyamatosan mozgó HTML oldali réteg 1310
Ezen oldalon a réteg, Le és Fel, autómatikusan mozog:
Ez egy mozgatható objektum.
Kezdeti pozíciója
bal felső sarok "x" és "y" értéke
Figyelem!
JavaScript fájlt meghívó utasítást, hól helyezzük el?
- A mozgatandó objektum után, vagy a dokumentumunk végén helyezzük el, ellenkező esetben nem fog működni!
Pozíciók megadását legtöbbször, "px" méretben határozzuk meg. Amikor JavaSript meghatározza pozíció értékét, akkor az értékhez hozzá kell rendelni a 'px' karaktereket. Példa: var a=15; objekt.style.width=a+'px';
Programunk megírása XHTML fájlban
<body>
<div id="mozog">
<p>Ez egy mozgatható objektum.</p>
<p>Kezdeti pozíciója</p>
<p>bal felső sarok "x" és "y" értéke</p>
</div>
<script language="JavaScript" type="text/javascript" src="mozgatas.js"> </script>
</body>
Stílusok meghatározása CSS fájlban:
#mozog { position: absolute; margin-top: 250px; margin-left: 350px; width: 300px; border: 2px solid black; padding: 10px; background-color: #E3E3E3; }
JavaScript, azaz, mozgatas.js fájlunk programja:
var x=230;
var y=10;
var leptek=5;
var szamlalo=0;
// objektumPozicio() függvény újboli meghívása 0.04 másodperces időzítéssel.
var reteg=window.setTimeout ("objektumPozicio(); " , 40) ;
var obj = document.getElementById ("mozog");
function objektumPozicio () {
obj = document.getElementById ("mozog");
obj.style.marginTop=y+'px';
obj.style.marginLeft=x+'px';
szamlalo++;
if (szamlalo<30) { y=y+leptek; }
else if (szamlalo>=30 && szamlalo<=60 ) { y=y-leptek; }
else if (szamlalo>60) {szamlalo=0; y=10; x=230;}
else {szamlalo=0; y=10; x=230;}
reteg=window.setTimeout("objektumPozicio(); " , 40) ;
}
Rétegek között elhelyezkedő elemek
A weblapok minden elemét vezérelhetjük, minden elemet tetszőleges pozícióba helyezhetünk.
A HTML objektumok csoportjai rétegeket alkotnak, ezeket külön egységként kezelünk.
Egyedi rétegeket is létrehozhatunk a <div> és a <span> elemekkel.
De önmagukban a html oldalon, semmi formázási hatásuk sincs, a bennük elhelyezkedő szövegrészre.
A span egy tetszőleges részt jelöl ki a html dokumentumban.
A div is hasonlóan jár el, de ez egy sortörést helyez el a tartalmi része előtt és után.
Ahhoz, hogy ezen rétegelemekben megjelenő szövegrész megjelenési formájára hatással legyünk, megtehetjük CSS, azaz stílus fájlban vagy JavaSripttel.
Ennek feltétele, hogy azonosítót rendeljünk hozzájuk.
CSS, azaz stílusfájl, elfogadja az id egyedi azonosítót vagy class osztályazonosítót, de a JavaScript az id egyedi azonosítót veszi figyelembe.