1970. Szöveges objektum mozgatása
Most a mozgószöveg bemutatóját láthatjuk.
Mozilla és Explorer böngészőben is egyformán jelenik meg.
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 kó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 az objektum nagyobb léptekkel (px) mozog.
Program ismétlődésének beállítása js. fájlban. Megegyezik mozgási sebesség beállításával.
window.setTimeout ("Scroll ( ) ; ",30);
Bemutató vége.
V É G E !
A html fájl:
<html>
<head>
<title> Szöveges objektum mozgatása </title>
<link href="elérési útvonal.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="elérési útvonal.js"> </script>
</head>
<body> <div id="container">
<div id="animacioszoveg">
<div id="szovegablak">
<div id="mozgoszakasz">
<h1> Címsor </h1>
<p> Bekezdés szövege </p>
<p> Újabb bekezdés szövege </p>
<p> A dokumentumunkat ugyan úgy megírhatjuk, mint DOCTYPE meghatározás esetén.</p>
<p> Dokumentum tartalmát formázhatjuk CSS, azaz stíluslapon megírt meghatározásokkal.
</p>
<p>A mozgószakaszt, azaz a mozgatandó témakört, elhelyezhetjük, div vagy span jelölőelemek között. <br />
A mozgószakaszt kijelölő kezdő jelölőelemnek egyedi id azonosítóval kell rendelkeznie. </p>
<h2> V É G E ! </h2>
</div>
</div>
</div>
</body>
</html>
CSS fájl, stílusok meghatározása:
body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0px; background-color: #ccc;}
#container {width: 790px; margin-top: 5px; margin-left: 10px;}
h2 {font-size: 30px; text-align: center; border-bottom: 2px solid #666;}
/* Mozgó szöveg meghatározásai. */
/* Első div szaksz, kijelöli dokumentumunkban azon területet, melyben megjelenítjük az animációt. */
#animacioszoveg {width:790px; height: 460px; border: 1px solid yellow;}
/* A következő div szakasz lesz, azon ablak, melyben a szöveg mozog*/
/* Meghatározzuk a div szakasz szélességét, magasságát, pozícióját, div szakaszon kivüli szövegrész megjelenését letiltjuk,*/
#szovegablak { position: absolute; width: 310px; height: 350px; left: 250px; top: 150px; border: none; overflow: hidden; }
/* Azon szakasz (div vagy span), melyben megírjuk a szöveget, elhelyezzük a képet, stb. */
#mozgoszakasz { position: absolute; width: 300px; margin-left: 10px; margin-top: 100px; overflow: hidden; }
JavaScript program:
// Meghatározzuk az indulási pozíciót, jelen esetben: var pos= 100
var pos=100 ;
function Scroll ( )
{ if (!document.getElementById) return ;
obj=document.getElementById("mozgoszakasz") ;
// Beállítjuk, mennyivel növekedjen vagy csökkenjen a megadott pozíció, minden ismétlődés után.
pos -=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 ( pos < 0-obj.offsetHeight-35) return ;
obj.style.top=pos+'px';
// Beállítjuk a program ismétlodését, azaz milyen gyorsan frissüljön,
// mely egyben a mozgási sebességet is meghatározza (egy másodperc = 1000)
window.setTimeout ("Scroll ( ) ; ",10) ; }
// görgetés megkezdése az oldal betöltésekor
window.onload = Scroll;