JavaScript Animation : Animation « GUI Components « JavaScript DHTML
- JavaScript DHTML
- 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<100) delay=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>
Related examples in the same category
