Görgető IFRAME
Adott objektum ismétlődő mozgatása
IFRAME keretben, automatikusan gördülő szöveg
Ezen weboldalon, az iframe keretben, egy másik html fájl tartalma látható.
Ismétléshez, üssük le az F5 billentyűt.
Ha az iframe ablak szélessége kisebb, mint a megjelenítendő html tartalmának szélessége, akkor megjelenik az alsó görgetősáv.
Az IFRAME ablakot tartalmazó html fájl
<body>
<iframe src="gorgetendo.html" class="mozgo_rama" border="0px"> </iframe>
</body>
Az IFRAME ablak stílusának meghatározása
.mozgo_rama {width: 430px; height: 350px; margin-left: 200px; border: none;}
Az IFRAME ablakban megjelenő, görgetendő html fájl
Mielőtt tesztelnénk a programot, készíteni kell egy 15x15-ös képet, majd mentsük el, kep15x15.jpg elnevezéssel.
<html>
<head>
<title> Görgetendő </title>
<link href="gorgetendo.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="gordulo.js"> </script>
</head>
<body>
<div id="szovegablak">
<div id="szoveg">
<p>
Most a mozgószöveg bemutatóját láthatjuk.<br />
Mozilla és Explorer böngészőben is egyformán jelenik meg.
</p>
<p>
<img src="kep15x15.jpg" width="15" height="15" /> <br />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" /> <br />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" /> <br />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" /> <br />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" /> <br />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
<img src="kep15x15.jpg" width="15" height="15" />
</p>
<p>
Mivel a teljes szöveg nem fér el a kis ablakban, egyszerre csak egy részét láthatjuk.<br /><br /> Az ablak rétegének owerflow tulajdonsága akadájozza meg,hogy a tartalom többi része látható legyen.<br />
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.<br />
A javascript kódban egy időzítő segitségével ismétlődően meghivjuk a Scroll() függvényt.
</p>
<ul>
<li> Szövegsorokban elhelyezhetünk listás felsorolásokat is.</li>
</ul>
<p> Automatikusan gördülő szöveg.<br />
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. <br />
Ha a pos -=0.5; értéket nagyobbra állítjuk, akkor az objektum nagyobb léptekkel (px) mozog.<br />
<p class="ameret">Program ismétlődésének beállítása js. fájlban. Megegyezik mozgási sebesség beállításával.<br />
window.setTimeout ("Scroll ( ) ; ",30);<br />
Bemutató vége.
</p>
</div>
</div>
</body> </html>
Az IFRAME ablakban megjelenő, görgetendő html fájlhoz tartozó stílusok
body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0px; background-color: #ccc;}
/* mozgó szöveg meghatározásai */
/* A kovetkező div szakasz lesz, azon ablak, melyben a szöveg mozog*/
/* meghatározzuk a div szakasz szélességét, magasságát, div szakaszon kivüli szövegrész megjelenését letiltjuk,*/
/* left és top, jelenleg azért -5px, mert így az iframe ablakban történő megjelenítéskor, nincs oldalsó görgetősáv*/
#szovegablak { position: absolute; width: 310px; height: 350px; left: -5px; top: -5px; border: none; overflow: hidden; }
/* azon szakasz (div vagy span), melyben megírjuk a szöveget, elhelyezzük a képet, stb. */
#szoveg { position: absolute; width: 300px; margin-left: 10px; margin-top: 100px; overflow: hidden; }
p {font-size: 18px; padding: 0px 2px 0px 2px; }
Az IFRAME ablakban megjelenő, görgetendő html fájlhoz tartozó JavaScript fájl
var pozicio=100 ;
function Scroll ( ) {
if (!document.getElementById) return ;
objektum=document.getElementById("szoveg") ;
pozicio -=0.5;
//Az offsetHeight után határozzuk meg, hogy a mozgás hól fog megállni, ez lehet -; vagy +; és tetszőleges érték
if ( pozicio < 0-objektum.offsetHeight-75) return ;
obj.style.top=pozicio;
window.setTimeout ("Scroll ( ) ; ",10) ;
}
// görgetés megkezdése az oldal betöltésekor
window.onload = Scroll;