|
|
Szöveg mozgatása
Mobilváltozat!
Asztali változathoz,
kattints a képre!
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 !
MOZILLA böngésző végett:
Csak natur html fájlban működik, azaz weblapunk kezdo <html> és záró </html> címkék között hlyezkedhet el.
Ha a következő meghatározásokat elhelyezzük html fájlunk fejlécében:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
akkor MOZIllA böngészoben már nem is müködik programunk.
Ha viszont nem helyezzük el a fenti meghatározást, akkor Explorer nem veszi figyelembe a következő meghatározásokat:
( margin-right: auto; és margin-left: auto;)
A html fájl, (MOZILLA végett, DOCTYPE meghatározást nem alkalmazunk):
<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>
JavaScript program:
// meghatározzuk az indulási pozíciót, jelen esetben: var pos= 150
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;
//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;
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 kovetkező 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; }