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

Flip Flop

Koda: 

<script type="text/javascript">

var ff="flip";
var inc=5

function flipflop()
{
 if (ff=="flip")
	 {
	  var wd = document.getElementById("slike/xfoto").getAttribute("width")
	  wd = wd - inc
	  document.getElementById("slike/xfoto").setAttribute("width",wd)
		  if (wd==0)
		  {
		  document.getElementById("slike/xfoto").setAttribute("src","slike/xfoto2.jpg");
		  inc=-inc
		   }

		  if (wd==320)
		  {
		   ff="flop"
		   inc=-inc
		   setTimeout("flipflop()",1000)
		   }

		   else
		   {
		   setTimeout("flipflop()",20);
		   }
	  }

 else
	 {
	  var ht = document.getElementById("slike/xfoto").getAttribute("height");
	  ht = ht - inc;
	  document.getElementById("slike/xfoto").setAttribute("height",ht);
		  if (ht==0)
		  {
		   document.getElementById("slike/xfoto").setAttribute("src","slike/xfoto1.jpg");
		   inc=-inc;
		   }

		  if (ht==240)
		  {
		   ff="flip";
		   inc=-inc;
		   setTimeout("flipflop()",1000);
		   }
		   else
		   {
		   setTimeout("flipflop()",20);
		   }
	  }
}


</script>

<body onload="flipflop()">
<img src="slike/xfoto1.jpg" width="320" height="240" id="slike/xfoto" />
Izgled v
brskalniku:
Razlaga: Ob naložitvi strani se pokliče funkcija flipflop(). Ker ima spremenljivka ff vrednost flip, se najprej izvede flip. Najprej se s stavkom document.getElementById("slike/xfoto").getAttribute("width") prebere širina slike. Širina slike se pomanjša za vednost inc. Če je širina enaka 0, se izvede stavek document.getElementById("slike/xfoto").setAttribute("src","slike/xfoto2.jpg");, kateri spremeni sliko. Če je širina slike 320 dobi spremenljivka ff vrednost flop. Če pa ni nič od tega pa funkcija kliče sama sebe in se širina postopoma zmanjšuje. Pri izvajanju flopa je vse zelo podobno. Edina razlika je ta, da ne beremo in spreminjamo širine temveč višino.

gor Gor     W3-SI     JavaScript     Primeri     Slike

SERŠ Maribor : Tehniška gimnazija : 2004 : Matej Prepelič