| Hlavní nabídka: |
Základy
Reference
Příklady
|
|
|
Pohyblivé menu
Jak efektivně pracovat se scrollováním? To se dozvíte v dnešním příkladu.
Zdrojový kód:
<html>
<head>
<title>Automatické posunování stránky</title>
<script language=javascript>
<!--
function prekresli()
{
menu.style.pixelTop=document.body.scrollTop;
window.setTimeout("prekresli()",10);
}
function rolluj()
{
window.scrollBy(0, 10);
timerID=window.setTimeout("rolluj()",5);
}
function AutoStop() {
clearTimeout(timerID);
}
// -->
</script>
</head>
<BODY onLoad="prekresli()">
<h2 ID="menu" STYLE="position:absolute; visibility:show;
z-index:2;"onmouseover="rolluj();" onmouseout="AutoStop()";>Trvalý text</h2>
<h3 ID=1>První nadpis</h3>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h3 ID=2>Druhý nadpis</h3>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h3 ID=3>Třetí nadpis</h3>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h3 ID=4>Čtvrtý nadpis</h3>
<br><br><br><br><br><br><br><br><br><br><br><br>
<h3 ID=5>Pátý nadpis</h3>
<br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Výsledek:
První nadpis
Druhý nadpis
Třetí nadpis
Čtvrtý nadpis
Pátý nadpis
Vysvětlení činnosti:
Pro vyzkoušení scriptu najeďte myší nad text "Trvalý text".
Pokud jste úspěšné doscrollovali až sem, tak se zde dovíte něco o tom, jak tento script pracuje. Je založen na třech funkcích prekresli(), rolluj() a AutoStop(). Funkce prekresli() se stará o to, aby byl neustále text na jednom místě. Používá k tomu metody, kterými přiřazuje prvku menu (v našem případě tak máme pojmenovaný tag span), aby byl neustále v levém horním rohu. Funkce rolluj() používá metodu scrollBy, která zapříčiní posun o 10 bodů dolů. Abychom nemuseli vjíždět na prvek neustále při každém posunu, využijeme syntaxi setTimeout, která bude danou funkci volat každých 5 milisekund. Poslední funkce je AutoStop(), která při vyvolání zastaví obnovování funkce rolluj(). V samotném kódu jsme již použili jen prvky CSS, které se JS ani tak moc netýkají a ovladače událostí, které již určitě musíte z předchozích článků skvěle ovládat :o). Tak už jen rollujte o106 :).
10.12.2002 | Příklady | David Havlíček
|
|
Dnes je 15. 11. 2024
Svátek má Leopold | |
| Bleskové aktuality: |
10.12.2002 Dlouho jsme tu neměli příklady, tak co kdybychom si dneska jeden dali?
07.12.2002 Poslední operáty, které si představíme, jsou speciální.
02.12.2002 Po delší pauze si představíme další operátory - řetězcové.
17.11.2002 Next operátory jsou přiřazovací.
10.11.2002 Jedněmi z posledních operátorů jsou porovnávací.
02.11.2002 Už jste slyšeli o logických operátorech? Pár jich taky je.
29.10.2002 Dalšími operátory jsou bitové.
26.10.2002 Dnes si představíme první z řady operátorů - aritmetické operátory.
24.10.2002 Další částí referencí jsou příkazy.
18.10.2002 Dnes se mrkneme na referenční přehled funkcí.
12.10.2002 Window je objekt, který má snad nejvíce metod a vlastností, tak se mu dnes podíváme na zoubek.
06.10.2002 Netradičně v neděli další objekt - string.
28.09.2002 Další sobota. Další objekt - screen.
21.09.2002 Hodně používáný je objekt navigator. Proto se na něj dneska zaměříme.
14.09.2002 Po týdenní pauze další referenční článek o objektu - tentokrát Math.
07.09.2002 Objekt location bude náš dnešní cíl.
04.09.2002 Na paškál si tentokrát vezmeme objekt history.
|
|
|
