W3-SI.com | HTML | CSS | JavaScript | Načrtovanje | |||||
SERŠ Maribor | Iskanje | Primeri |
Koda: | <script type="text/javascript"> levo2=0 levo3=0 levo4=0 levo5=0 levo6=0 function gremo() { klic1=setInterval("plast2()",25) } function plast2() { if (levo2<460)levo2=levo2+1 if (levo2==100) klic2=setInterval("plast3()",25) { document.getElementById("plast2").style.clip="rect(0px " + levo2 + "px 300px "+ (levo2-60) +"px)" } } function plast3() { if (levo3<460)levo3=levo3+1 if (levo3==100) klic3=setInterval("plast4()",25) { document.getElementById("plast3").style.clip="rect(0px " + levo3 + "px 300px "+ (levo3-60) +"px)" } } function plast4() { if (levo4<460)levo4=levo4+1 if (levo4==100) klic4=setInterval("plast5()",25) { document.getElementById("plast4").style.clip="rect(0px " + levo4 + "px 300px "+ (levo4-60) +"px)" } } function plast5() { if (levo5<460)levo5=levo5+1 if (levo5==100) klic5=setInterval("plast6()",25) { document.getElementById("plast5").style.clip="rect(0px " + levo5 + "px 300px "+ (levo5-60) +"px)" } } function plast6() { if (levo6<460)levo6=levo6+1 { document.getElementById("plast6").style.clip="rect(0px " + levo6 + "px 300px "+ (levo6-60) +"px)" } } </script> <style type="text/css"> img { position: absolute; left:250px; top: 20px; width: 400px; height: 300px; clip: rect(0px 0px 0px 0px) } img#plast1 { clip: rect(auto auto auto auto) } </style> <img id="plast1" src="slike/slika2.jpg" alt="slika" /> <img id="plast2" src="slike/slika2m.jpg" alt="slika" /> <img id="plast3" src="slike/slika2z.jpg" alt="slika" /> <img id="plast4" src="slike/slika2r.jpg" alt="slika" /> <img id="plast5" src="slike/slika2v.jpg" alt="slika" /> <img id="plast6" src="slike/slika2y.jpg" alt="slika" /> |
---|---|
Izgled v brskalniku: |
Ogled v novem oknu |
Razlaga: | Če kliknemo na gumb gremo, pokličemo funkcijo gremo() , ki sproži timer klic1 . Ta nato vsakih 25ms pokliče funkcijo plast2() . Le-ta premika vidno območje slike plast2 za 1px v desno. ko pride do 100px, pokliče naslednjo funkcijo plast3() , ki premika vidno polje slike plast3 . Nato se to tako nadaljuje, vse dokler ne pride do plast6() , ki pa več ne pokliče nobene druge funkcije. Vidno polje slike, se nato premika v neskončnost.Ob pritisku na gumb konec, se stran na novo naloži. Ob pritisku na gumb nazaj pa odpre v zgodovini prejšnje okno. |
SERŠ Maribor : Strokovna gimnazija : 2006 : Aleš Škerbinek