|
Object animation with JavaScript
This section will demonstrate a few ways to animate an
object using JavaScript. You can move objects on a web page using an
event or right when the page loads. I'll demonstrate a circle script and
a slide script.
Circle Script
This script calls the RotateCircle()
function when the
page loads and starts the rotation of the image immediately as you can
see below.
Beautiful now let's see how it is done, here is the code:
<head><script type="text/javascript">
// This function gets the image by id the location of
the image is
//passed using variables x and y
function placeIt(id, x, y)
{
var object = document.getElementById(id);
object.style.left = x + 'px';
object.style.top = y + 'px';
}
// This function actually starts the rotation of the
image.
// distance2 is the radius of the circle and degree2 is the
incrementation
//On each iteration the angle is incremented then the setTimeout()
function
//is used to set the time of each iteration.
var degree2 = 0;
function RotateCircle()
{
distance2 = 50;
degree2 += 10;
// This statement converts degrees to radians.
JavaScript uses radians as opposed to //degrees when working with
angles.
x = distance2 * Math.cos(degree2 * Math.PI / 180);
y = distance2 * Math.sin(degree2 * Math.PI / 180);
xOffset = 100;
yOffset = 100;
placeIt('circ', x + xOffset, y + yOffset);
setTimeout('RotateCircle();' ,50);
}
</script></head>
// This starts the first iteration of the rotation
<body onload="RotateCircle();">
<div style="position:relative;">
<img id="circ" src="redskinsLogo.jpg" width="53" height="52"
alt="circle" style="position:absolute;"></div></body> | 
