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

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