W3-SI.com     HTML CSS JavaScript Načrtovanje    
  logotip  
SERŠ Maribor Iskanje Primeri
Koda:
<script type="text/javascript">
miga=false
levo=false
pozicija=30
function premikaj()
{
if (miga==false)
  {
  miga=true
  gremo()
  }
else
  {
  miga=false
  clearTimeout(timer)
  }
}

function gremo()
{
if (levo==false) {pozicija++; document.getElementById("plast1").style.left=pozicija}
if (levo==true) {pozicija--; document.getElementById("plast1").style.left=pozicija}
if (pozicija<1) {levo=false}
if (pozicija>400) {levo=true}
timer=setTimeout("gremo()",15)
}

</script>

<style>
#plast1
{
  position: relative;
  left: 0px;
}
</style>

<div id="plast1">
<img src="slike/xfoto1.jpg" onclick="premikaj()" alt="To se premika" />
</div>
Izgled v
brskalniku:
To se lahko premika
Razlaga:

Ob kliku na zgornjo sliko pokličemo funkcijo premikaj() - onclick="premikaj()", kar sproži oziroma ustavi premikanje slike levo in desno. V tej funkciji je zapisan if stavek, kateri preveri, če je prej definirana spremenljivka miga postavljena na 1 ali 0 (true ali false).

V primeru, da je na 0, kar pomeni da se funkcija trenutno ne izvaja in slika miruje jo postavi na 1 ter pokliče funckijo
gremo() s čim se slika začne pomikat. V funkciji gremo so pa zapisani štirje if stavki.

Prvi preveri vrednost spremeljivke levo (0 ali 1). Če je levo==false, levo = 0, potem se izvede stavek document.getElementById("plast1").style.left=pozicija v katerem se glede na ID (getElementById("plast1")) poišče element, ki se bo pomikal - style.left=pozicija - pozcija je spremaljivka, ki ji je na začetku določena vrednost 30 v tem stavku se pa povečuje za 1 (pozicija++), kar pomeni da se povečuje oddaljenost elementa od levega roba, slika se pomika DESNO.

Naslednji stavek pa stori prav obratno. Če je spremenljivaka levo postavljena na true, levo = 1, potem se izvede enak proces kot v prejšnjem stavku, le da se tokrat pozicija zamnjšuje (pozicija--) in tako se slika pomika LEVO.

Naslednjiva dva if stavka pogledata koliko je trenutna vrednost spremenljivke pozicija in glede na to ali je je večje od 400 ali manjše od 1 postavi spremenljivko levo na določeno vrednost (true ali false), kar pa potrebujemo za to, ker stavek ki je zapisan za vsemi if stavki - timer=setTimeout("gremo()",15) pokliče to isto funkcijo (gremo()) vsakih 15 milisekund in tako zgleda kot, da bi se slika premikala, v bistvu pa se samo ta ista funcija vedno znova kliče ter s tem ustvari efekt premikanja. Omenjena stavka pa povzročita, da ko slika pride na kraj, se ob naslednjem klicu funkcije začne premikat v obratno smer.

Če pa klicana funcija premikaj() ugotovi, da je spremenljivka miga postvaljena na true oz. da ni flase, kar pomeni da se funkcija že izvaja in slika že premika, pa jo to ustavi. Tako se zgodi, da ko ponovno kliknemo na se že premikajočo sliko, se premikanje ustavi. Oz. KLIK in se spet začne... :)

SERŠ Maribor : Strokovna gimnazija : 2004 : Davorin Lenart