TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>JS Jednoduchá animace jako Marquee</title>
<script>
var X = 0; // aktualni pozice X
var Y = 0; // aktualni pozice Y
var smerX = 1; // -1 / 0 / +1
var smerY = 0; // -1 / 0 / +1
var krokX = 7; // +7
var krokY = 0; // +0
var rychlost = 100; // rychlost opakovani v ms
var casovac = null; // promenna, kam je ulozen casovac
function animaceStart()
{
animaceStop(); // zastav casovac v pripade, ze uz bezi, jinak se vam spusti dva a vice najednou :)
casovac = window.setInterval("animaceKrok()", rychlost); // spust opakovanym casovacem kazdych 100 ms funkci pohybKrok()
}
function animaceStop()
{
clearTimeout(casovac); // zastavi casovac
}
function animaceKrok()
{
// zmen souradnice pohybu
X += smerX * krokX; // kruhovy pohyb je X = stredX + R * sin(t); Y = stredY + R * sin(t);
Y += smerY * krokY; // krok = Math.PI / 45; t+=krok
// ohranic prostor pohybu
if (X<krokX) {smerX = 1;}
if (X>(400-krokX)) {smerX = -1;}
// premisti prvek
var prvek = document.getElementById("textik");
prvek.style.left = X + "px";
prvek.style.top = Y + "px";
}
</script>
</head>
<body>
<h2>Jednoduchá animace jako Marquee</h2>
<!-- absolutni prvek by mel byt ohraniceny prostorem s relativni pozici -->
<div style="position:relative; height:1em;">
<span id="textik" style="position:absolute;">Text, který se pohybuje</span>
</div>
<script>
animaceStart(); // spusteni animace
</script>
<form>
<p>
<input type="button" value="Změnit směr" onclick="smerX = -smerX;">
<input type="button" value="Start" onclick="animaceStart();">
<input type="button" value="Stop" onclick="animaceStop();" >
</p>
</form>
<h3>Co se má stát?</h3>
<p>Při spuątění stránky se začne text pohybovat doprava. Při překročení
(400px + krok) se změní směr a text se začne vracet zpět.
Směr lze dále ovlivnit tlačítkem Změnit směr. A celou animaci lze zastavit
nebo spustit tlačítky Start a Stop.</p>
</body>
</html>
