e-gradiva     HTML CSS JavaScript Načrtovanje    
  logotip  

 Uvod | Osnove | Predmeti | Besedilo | Števila | Obrazci | Slike | Brskalnik

SERŠ Maribor Iskanje Primeri

Osnove

Stavki

Dogodki

Brskalnik

Okna

Nizi besedila

Polja

Obrazci

Števila

Matematika

Logične

Čas

Slike

Slogi

Kurzor

Koda:
<script type="text/javascript">
var stevec=0;
function kurzor()
{
stevec++
stevec%=8
switch (stevec)
{
case 7:
  document.getElementById("slika").style.cursor = 'nw-resize';
  break;
case 6:
  document.getElementById("slika").style.cursor = 'w-resize';
  break;
case 5:
  document.getElementById("slika").style.cursor = 'sw-resize';
  break;
case 4:
  document.getElementById("slika").style.cursor = 's-resize';
  break;
case 3:
  document.getElementById("slika").style.cursor = 'se-resize';
  break;
case 2:
  document.getElementById("slika").style.cursor = 'e-resize';
  break;
case 1:
  document.getElementById("slika").style.cursor = 'ne-resize';
  break;
default:
  document.getElementById("slika").style.cursor = 'n-resize';
}
}

function spreminjaj()
{
casovnik=window.setInterval("kurzor()",100);
}

</script>
Izgled v
brskalniku:
slika
Razlaga: Zgoraj zapisan primer je zanimiv primer delovanja Javascripta, saj se lepo poigra s miškinim kurzorjem ko ta prečka določeno sliko. Ko se z miško premaknemo nad sliko, se izvedeta funkciji kurzor in spreminjaj. Funkcija spreminjaj čaka 100 ms in nato izvede fukcijo kurzor, ki za ena povečuje spemenljivko števec. Glede na vrednost te spremenljivke potem nastavi izgled kurzorja. Če je vrednost števca 7 potem nastavi stil kurzorja na "nw-resize". Tip spreminja tako, da dobimo preprosto animacijo vrtenja kurzorja za 360 stopinj.

SERŠ Maribor : Strokovna gimnazija : 2004 : Damijan Račel