|
|
Görgető IFRAME
Mobilváltozat!
Asztali változathoz,
kattints a képre!
IFRAME keretben, automatikusan gördülő szöveg
Ezen weboldalon, az iframe keretben, egy másik html fájl tartalma látható.
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;