W3-SI.com     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri

Disko efekt

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