 Automatikusan gördülő szöveg
Explorer böngészőben: Amikor gyakorlunk, a most látott böngésző ablakának felső részén, megjelenik egy figyelmeztető szöveg, a biztonság érdekében.
A beállítások megjelenítéséhez kattintson, ide felírat.
Ilyenkor a megjelenő ablakban a blokkolt tartalom engedélyezése szövegre kell kattintani, hogy programunk a gyakorlás alatt is működjön.
Most a mozgószöveg bemutatóját láthatjuk.
Ha minden jól sikerült, elméletileg és gyakorlatilag is, üzemelni kell a programnak
Mivel a teljes szöveg nem fér el a kis ablakban, egyszerre csak egy részét láthatjuk.
Az ablak rétegének owerflow tulajdonsága akadájozza meg,hogy a tartalom többi része látható legyen.
Programunk a gördülő szöveg style.top tulajdonságának módosításával éri majd el, hogy a szöveg az ablakhoz képest elmozduljon, és görgetett szöveg hatását keltse.
A javascript códban egy időzítő segitségével ismétlődően meghivjuk a Scroll() függvényt.
- Szövegsorokban elhelyezhetünk listás felsorolásokat is.
Automatikusan gördülő szöveg.
A szöveg folyamatos gördülését, valamint annak gyorsaságát a java script fájlban megírtak határozzák meg.
Ha a pos -=0.5; értéket nagyobbra állítjuk, akkor a szöveg gördülési sebessége is megnő.
Szövegbemutató vége.
A html lap
A szovegablak azonositóval ellátott div szakasz alakítja ki a kis ablakot, amelyben a görg szöveg megjelenik.
A szoveg azonosítóval ellátott div szakasz, pedig a görgetendő szöveget tárolja.
A szövegben bármilyen HTML-elemet használhatunk, de a szövegnek az ablakhoz kell igazodnia.
A szöveget tároló div szakaszt, szoveg néven történő azonosítóval láttuk el.
Ezért a css, azaz stíluslapon és a java script fájlban is, ezen azonosító néven kell szerepelnie.
---------------------------------------------
A html lap görgetendő részének megírása.
<div id="szovegablak">
<div id="szoveg">
<p>
Ide írjuk meg, azon dokumentum tartalmát, melyet automatikusan szeretnénk görgetni.
</p>
</div>
</div>
-----------------------------------------------
A css fájl
A css, azaz stíluslapon, mindenki tetszésének megfelelően módosíthatja, a meghatározásokat.
A css fájl beállítja a két div szakasz szegélyeit, margóit, és háttérszínét, az ablak position tulajdonságát relative-re állítja, hogy a dokumentumunk meghatározot, (szokványos) helyre kerüljön.
A gördülő szöveg position tulajdonságát pedig absolute-ra állítjuk, hogy a program megváltoztathassa az elhelyezkedést.
A left biztosítja, hogy legyen egy kis margó az ablak mindkét oldalán, hogy a szöveget ne akadályozza semmi.
Mivel a teljes szöveg nem fér el a kis ablakban, egyszerre csak egy részét láthatjuk.
Az ablak rétegének owerflow: hidden; tulajdonság akadájozza meg,hogy a tartalom többi része látható legyen.
A css, azaz stíluslapon megírt meghatározások:
/* meghatározzuk a div szakasz szélességét, magasságát, valamint a div szakaszon kivüli szövegrész megjelenését letiltjuk, és megjelenítünk egy keretet. */
#szovegablak { position: relative; width: 400px; height: 350px; margin-left: 150px; overflow: hidden; border: 5px solid red; background-color: #f63; }
/* meghatározzuk a megjelenő szöveg szélességét. háttérszínét, betűméretét és színét, mennyivel legyen beljebb a szöveg, a div szakasz szélétől*/
#szoveg { position: absolute; width: 300px; left: 45px; top: 100px; background-color: #ff0000;}
#szoveg p { color: #000000; padding: 0px 10px 0px 10px; }
A JavaScript fájl
A JavaScript fájl kiterjesztése: js
Programunk a gördülő szöveg style.top tulajdonságának módosításával éri majd el, hogy a szöveg az ablakhoz képest elmozduljon, és görgetett szöveg hatását keltse.
A javascript kódban egy időzítő segitségével ismétlődően meghivjuk a Scroll() függvényt.
A JavaScript fájl tartalma.
A szöveg görgetési sebességét variálhatjuk, a többit hagyjuk így.
// változó, a gördülő szöveg ablakának elhelyezéséhez
var pos=100 ;
function Scroll ( ) {
if (!document.getElementById) return ;
obj=document.getElementById("szoveg") ;
pos -=0.5;
if ( pos < 0-obj.offsetHeight+130) return ;
obj.style.top=pos;
window.setTimeout ("Scroll ( ) ; ",30) ;
}
// görgetés megkezdése az oldal betöltésekor
window.onload = Scroll;
Az első sor egy globális változót határoz meg pos néven, mely a görgetés aktuális helyzetét tárolja.
Scroll () függvény kivon egyet a post-ból, és megvizsgálja a kapott értéket.
Ha a görgetés elérte a szöveg végét a függvény kilép, egyébként beállítja az objektum helyzetét, és egy időzítő segitségével újra meghívja magát.
|