JavaScript Animation : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

 

JavaScript Animation




/*
Mastering JavaScript, Premium Edition
by James Jaworski 

ISBN:078212819X
Publisher Sybex CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Simple Animation</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function initialize() {
 start=false
 imageSource=new Array(5)
 for(var i=0;i<5;++i){
  imageSource[i]=new Image()
  imageSource[i].src="image"+i+".gif"
 }
 delay=500
 delta=100
 nextImage=1
 startAnimation()
}
function startAnimation() {
 interval=setInterval('animate()',delay)
}
function setStart() {
 start = true
}
function animate() {
 if(start==true){
  i=nextImage
  ++nextImage
  nextImage%=5
  if(imageSource[i].complete)
   document.display.src=imageSource[i].src
 }
}
function goFaster() {
 clearInterval(interval)
 delay-=delta
 if(delay<100delay=100
 startAnimation()
}
function goSlower() {
 clearInterval(interval)
 delay+=delta
 startAnimation()
}
// --></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript"><!--
initialize()
// --></SCRIPT>
<H1>Simple Animation</H1>
<IMG NAME="display" SRC="image0.gif" onLoad="setStart()">
<BR>
<FORM>
<INPUT TYPE="BUTTON" NAME="faster" VALUE="Faster" ONCLICK="goFaster()">
<INPUT TYPE="BUTTON" NAME="slower" VALUE="Slower" ONCLICK="goSlower()">
</FORM>
</BODY>
</HTML>

           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» Animation