e-gradiva | HTML | CSS | JavaScript | Načrtovanje | |||||
SERŠ Maribor | Iskanje | Primeri |
Koda: | <script type="text/javascript"> function gremo() { klic1=setInterval("plast2()",100) klic2=setInterval("plast3()",100) klic3=setInterval("plast4()",100) klic4=setInterval("plast5()",100) klic5=setInterval("plast6()",100) } function plast2() { levo2=Math.floor(Math.random()*460) document.getElementById("plast2").style.clip= "rect(0px " + levo2 + "px 300px "+ → (levo2-Math.floor(Math.random()*200)-20) +"px)" document.getElementById("plast2").style.zIndex= Math.floor(Math.random()*100) } function plast3() { levo3=Math.floor(Math.random()*460) document.getElementById("plast3").style.clip= "rect(0px " + levo3 + "px 300px "+ → (levo3-Math.floor(Math.random()*200)-20) +"px)" document.getElementById("plast3").style.zIndex=→ Math.floor(Math.random()*100) } function plast4() { levo4=Math.floor(Math.random()*460) document.getElementById("plast4").style.clip= "rect(0px " + levo4 + "px 300px "+ → (levo4-Math.floor(Math.random()*200)-20) +"px)" document.getElementById("plast4").style.zIndex=→ Math.floor(Math.random()*100) } function plast5() { levo5=Math.floor(Math.random()*460) document.getElementById("plast5").style.clip= "rect(0px " + levo5 + "px 300px "+ → (levo5-Math.floor(Math.random()*200)-20) +"px)" document.getElementById("plast5").style.zIndex=→ Math.floor(Math.random()*100) } function plast6() { levo6=Math.floor(Math.random()*460) document.getElementById("plast6").style.clip= "rect(0px " + levo6 + "px 300px "+ → (levo6-Math.floor(Math.random()*200)-20) +"px)" document.getElementById("plast6").style.zIndex=→ Math.floor(Math.random()*100) } </script> <style type="text/css"> img { position: absolute; left:250px; top: 20px; width: 400px; height: 300px; clip: rect(0px 0px 0px 0px) } #plast1 { clip: rect(0px 400px 300px 0px) } </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: |
V tem primeru imamo opravka s postopkoma Math.random in Math.floor . Ko se funkcija gremo začne izvajati, dobimo sliko, ki je osvetljena z različnimi barvami in daje občutek disko efekta. V bistvu vidimo delce 6-ih različnih enobarvnih slik, ki so v naključnem redu položene ene nad drugo (z-index ). Slike so širine naključne širine. V časovnem zaporedju naključne vrednosti menjavajo in tvorijo efekt.
|
SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart