| e-gradiva | HTML | CSS | JavaScript | Načrtovanje | |||||
![]() |
|||||||||
| SERŠ Maribor | Iskanje | Primeri | |||||||
| Koda: |
<script type="text/javascript">
slika=1
var klic1
function gremo()
{
levo=0
document.getElementById("plast1").src=" slika"+(slika)+".jpg"
slika++
slika=slika%5
document.getElementById("plast2").style.clip="rect(0px 0px 0px 0px)"
document.getElementById("plast2").src=" slika"+(slika)+".jpg"
klic1=setInterval("plast1()",5)
}
function plast1()
{
if (levo<301)levo=levo+3
else {clearInterval(klic1);setTimeout("gremo()",2000)}
document.getElementById("plast2").style.clip=
"rect(0px " + parseInt(4*levo/3) + "px " +levo + "px 0px)"
}
</script>
<style type="text/css">
img
{
position: absolute;
left:250px;
top: 20px;
width: 400px;
height: 300px;
}
</style>
<img id="plast1" src="slika1.jpg" alt="slika" />
<img id="plast2" src="slika1.jpg" alt="slika" />
|
|---|---|
| Izgled v brskalniku: |
Ogled v novem oknu |
| Razlaga: |
Ob kliku na zgornje besedilo se požene metoda gremo(), ki najprej nastavi na dve prekrivajoči div plasti prvi dve sliki in nato še nastavi dogodek, ki vsakih 5 milisekund požene metodo plast1().
Metoda plast1() vsakič, ko steče, razkrije dodatne 3 vrstice in 4 stolpce točk naslednje slike. Ko razkrije celotno sliko, prekine dogodek, ki jo zaganja vsakih 5 milisekund, ter ustvari nov dogodek, ki pokliče spet prvotno funkcijo čez 2 sekundi.
Postopek se ponavlja, dokler ne pride do konca slik, nakar prične spet pri prvi sliki.
|
SERŠ Maribor : Strokovna gimnazija : 2006 : Tadej Seme