New Page 7

Domov
Výpisy
Premenné
Dialógové okná
Tlačidlá
.Podmienky a vetvenie
Cyklus
Funkcie
Objekty
Objekt Array
Objekty tvorené užívateľom
Objekt Date
Objekt Math
Formuláre
Objekty formulárov
Ďalšie objekty formulára
Obrázky
Obrázky-2
Stavový riadok
Popis v stavovom riadku
Animovaný text
Hodiny
Skladačka
Linky

12. Animovaný text

Tento skript pochádza od Davida Morkesa - z knihy JavaScript - tipy a triky pro tvurce webu - vydaný nakladateľstvom Grada r.2002 ISBN 80-247-0258-4 . Nájdete ho na na stránke www.grada.cz

Vlniaci sa text napíšeme do premennej message. Vytvoríme pole zvys, ktoré bude určovať bodové vychýlenie zvislé písmen, cez ktoré prechádza vlna. Znamienko - (mínus) znamená vychýlenie hore, + (plus) vychýlenie smerom dolu.

V časti body inicializujeme 1. krok volaním funkcie jump0(). Tu sa text rozdelí na jednotlivé písmená. Každé písmeno tvorí blok ohraničený tagom SPAN, ktorého pozícia je relatívna. Odkaz na každé písmeno bude realizované pomocou hodnoty ID - n0,n1,...

Funkcia Jumla() spôsobí pohyb prvého písmena vľavo, návrat na pôvodnú pozíciu zas funkcia Jumlb()

Vlnenie textu zabezpečí funkcia Jump2(). Tu sa v cykle typu for zobrazuje celý text, na jednotlivé písmená cez ktoré prebieha vlna, použijeme pole zvys na zavlnenie, ostatné písmená sa zobrazujú v riadku.

Zdrojový text:

<html> <head> <title>Animovaný text</title> <script language="JavaScript"> zvys=new Array(); zvys[0]=-1; zvys[1]=-4; zvys[2]=-7; zvys[3]=-10; zvys[4]=-7; zvys[5]=-4; zvys[6]=-1; /*zvys[7]=2; zvys[8]=5; zvys[9]=8; zvys[10]=11; zvysi[11]=8; zvys[12]=5; zvys[13]=2;*/ num=0; num2=0; var txt=""; message="Programujeme v JavaScripte" function jump0() { for(i=0; i != message.length;i++){ txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>" } jump.innerHTML=txt; txt=""; jump1a() } function jump1a() { nfinal=document.all.n0 nfinal.style.left=-num2; if(num2 != 9){ num2=num2+3; setTimeout("jump1a()",50) } else { jump1b() } } function jump1b(){ nfinal.style.left=-num2; if(num2 != 0) { num2=num2-3; setTimeout("jump1b()",50) } else{ jump2() } } function jump2(){ txt=""; for(i=0;i != message.length;i++){ if(i+num > -1 && i+num < 7){ txt=txt+"<span style='position:relative;top:"+zvys[i+num]+"'>"+message.charAt(i)+"</span>" //alert(num) } else { txt=txt+"<span>"+message.charAt(i)+"</span>" } } jump.innerHTML=txt; txt=""; if(num != (-message.length)) { num--; setTimeout("jump2()",50) } else { num=0; setTimeout("jump0()",50) } } </script> </head> <body> <H2><div id="texty"> </div> <script> jump=document.all.texty jump0() </script> </body> </html>

Úloha:

Upravte vlniaci sa text s inými parametrami

Riešenie:

pridáme zavlnenie zvys[7]=2; zvys[8]=5; zvys[9]=8; zvys[10]=11; zvys[11]=8; zvys[12]=5; zvys[13]=2;
podmienku prebiehajúcej vlny doplníme if (i+num > -1 && i+num < 14)

Posledná aktualizácia: 12 máj, 2003

Webmaster: Mgr.Anna Peťovská