e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Disko efekt

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