Réteg elrejtése csúsztatással1312

Ezen oldalon a réteget, autómatikusan a következő irányokban fog mozgni: Fel és Le

A mozgási irányt, vezérelhetjük button gombokkal, vagy hivatkozásokkal (horgony a)
A példánkban mindkettő szerepel, de a valóságban lehetőleg csak az egyik variációt alkalmazzuk

Vezérlés: Button gombok alkalmazásával

_______________

Vezérlés: Hivatkozások alkalmazásával

Fel ________ | ________ Le

Ez egy mozgatható objektum.

Kezdeti pozíciója

bal felső sarok "x" és "y" értéke

Megjegyzés:
- Ha nem írunk CSS, azaz stílus meghatározást a mozgó objektumhoz, akkor az meg sem jelenik
- Ha a CSS fájlban top meghatározást alkalmazunk, akkor a js fájlban is top legyen.
- Ha a CSS fájlban margin-top meghatározást alkalmazunk, akkor a js fájlban marginTop legyen
- Ismétlődést, vezérlő utasítást, ne a js programunk végén, hanem közvetlen az if utasításban helyezzük el.
- Az else utasítás, elhagyható

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="vezerlo">

<p> <u>Button gombok</u> <br />
<button onClick="pozicioFel();"> Fel</button> _______________
<button onClick="pozicioLe();"> Le</button>
</p>


<p> <u>Hivatkozások</u> <br />
<a href="#.html" onClick="pozicioFel();"> Fel</a> ________ | ________
<a href="#.html" onClick="pozicioLe();"> Le</a>
</p>
</div>

<div id="rejt">
<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>
</div>

</body>

Stílusok meghatározása CSS fájlban:

#vezerlo {float:left;}
#rejt { position: relative; overflow: hidden; width: 400px; height: 170px; margin-left: 350px; border: 1px solid black;}
#mozog { position: absolute; margin-top: 10px; width: 300px; margin-left: 20px; border: 2px solid black; padding: 10px; background-color: #E3E3E3;}

JavaScript, azaz js fájlunk programja:

var le=0;
var fel=0;
var y=10;

function pozicioLe() {
obj = document.getElementById ("mozog1351");
obj.style.marginTop=y+'px';
if (le<=17){le++;
y=y+le;
fel=0;
window.setTimeout("pozicioLe(); " , 40) ;
}
}

function pozicioFel() {
obj = document.getElementById ("mozog1351");
obj.style.marginTop=y+'px';
if (fel<=17){ fel++;
y=y-fel;
le=0;
window.setTimeout("pozicioFel(); " , 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.

Vissza a lap elejére