e-gradiva | HTML | CSS | JavaScript | Načrtovanje | |||||
SERŠ Maribor | Iskanje | Primeri |
Koda: | <script type="text/javascript"> slika=1 var klic1 function gremo() { levo=0 document.getElementById("plast1").src=" slika"+(slika)+".jpg" slika++ slika=slika%5 document.getElementById("plast2").style.clip="rect(0px 0px 0px 0px)" document.getElementById("plast2").src=" slika"+(slika)+".jpg" klic1=setInterval("plast1()",5) } function plast1() { if (levo<301)levo=levo+3 else {clearInterval(klic1);setTimeout("gremo()",2000)} document.getElementById("plast2").style.clip= "rect(0px " + parseInt(4*levo/3) + "px " +levo + "px 0px)" } </script> <style type="text/css"> img { position: absolute; left:250px; top: 20px; width: 400px; height: 300px; } </style> <img id="plast1" src="slika1.jpg" alt="slika" /> <img id="plast2" src="slika1.jpg" alt="slika" /> |
---|---|
Izgled v brskalniku: |
Ogled v novem oknu |
Razlaga: |
Ob kliku na zgornje besedilo se požene metoda gremo() , ki najprej nastavi na dve prekrivajoči div plasti prvi dve sliki in nato še nastavi dogodek, ki vsakih 5 milisekund požene metodo plast1() .
Metoda plast1() vsakič, ko steče, razkrije dodatne 3 vrstice in 4 stolpce točk naslednje slike. Ko razkrije celotno sliko, prekine dogodek, ki jo zaganja vsakih 5 milisekund, ter ustvari nov dogodek, ki pokliče spet prvotno funkcijo čez 2 sekundi.
Postopek se ponavlja, dokler ne pride do konca slik, nakar prične spet pri prvi sliki.
|
SERŠ Maribor : Strokovna gimnazija : 2006 : Tadej Seme