Mozgó objektum bemutatója. 1916

A mozgatandó objektumot, azaz területet, kijelölhetjük:

Kezdõ <div> és záró </div> jelölõelemekkel
Kezdõ <span> és záró </span> jelölõelemekkel

A kezdõ jelölõelemnél, id egyedi azonosítót alkalmazunk.

Mozgó objektum bemutatója.

Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.
Mozgó objektum bemutatója.

A html fájl

<html>
<head>
<title>Objektum mozgatása</title>
<script language="JavaScript" type="text/javascript" src="Elérési_útvonal.js"> </script>
<link href="Elérési_útvonal.css" rel="stylesheet" type="text/css" />
</head>
<body> <div id="container">

<div class="mozgasiterulet"> <div id="divszakasz">
<p>
Mozgó objektum bemutatója.<br />
<img src="kep15x15.jpg" width="15" height="15" /> <br />
<img src="kep15x15.jpg" width="15" height="15" />
</p>
<p>
<img src="kep15x15.jpg" width="15" height="15" />
</p>
<p class="p1">
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
Mozgó objektum bemutatója.<br />
</p>

</div> </div>

</div> </body>
</html>

CSS fájl, stílusok megírása

body {font-family: Arial, Helvetica, sans-serif; font-size: 100.01%; margin: 0; background-color: #ccc;}
#container {width: 800px; margin-top: 5px; margin-left: 10px;}
.p1{font: 16px Ariel; color: green;}

/*A height értéke határozza meg az objektum magasságát és programunk addig fut, még ezen alsó pozíció meg nem egyezik a JavaScriptben meghatározott 380px-el. Függetlenül attól, hogy az objektum teteje hól jár. */

#divszakasz { position: absolute; width: 300px; height: 350px; margin-top: 10px; margin-left: 145px; border: 2px solid black; padding: 5px;}

/* Mozgási terület kijelölésének azért van értelme, mert így egy adott területen belül történik az animáció, vagyis ezt utólag állítsuk be, mikor már látjuk, hogy mekkora területre van szükségünk. */

.mozgasiterulet {width: 790px; height: 520px; margin-top: 10px; border: 1px solid yellow; padding-top: 10px;}

JavaScript fájl megírása

// Meghatározzuk az indulási pozíciót, jelen esetben: var pos= 150
var pos=150 ;

function Scroll ( ) {
if (!document.getElementById) return ;
obj=document.getElementById("divszakasz") ;

// Beállítjuk, mennyivel növekedjen vagy csökkenjen a megadott pozíció, minden ismétlõdés után
pos -=0.5;

if ( pos < 0-obj.offsetHeight+380) return ;
obj.style.marginTop=pos+'px';

// Beállítjuk a program ismétlõdé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 ( ) ; ",30) ;
}

// Görgetés megkezdése az oldal betöltésekor
window.onload = Scroll;