| 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