You can animate objects so they move along circular or even elliptical paths.
The animation code is essentially the same as a straight line except we don't need to test for a stop position as we want the object to continue moving around the circle.
Here is the code.
<head>
<title>Basic Animation</title>
<script type='text/javascript'>
<!--
position=0;
function moveit(){
document.getElementById("piccy").style.top=90*Math.cos(position)+125+'px';
document.getElementById("piccy").style.left=90*Math.sin(position)+125+'px';
position=position+.1;
setTimeout("moveit()",20);
}
//-->
</script>
</head>
<body style='text-align:center;color:wheat;background-color:darkslategray'>
<h3>A Simple dhtml Animation</h3>
<form action=''>
<input type='button' value='Move it' onclick='moveit();'
style='background-color:steelblue;color:orange;font-weight:bold;'>
</form>
<div id='piccy' style="position:absolute;top:215px;left:125px;">
<img src="rosehead.gif" alt='rosehead' /></div>
</body>
Circular Animation A working example of the circular animation
Exercise
1. Recreate the example above with a graphic of your choice.
2. Use can get interesting effects by adjusting the cos formula,
Try 90*Math.cos(X*position)+125+'px'; where X is an integer.
What happens if you do the same thing to the sin formula ?
3. Replace the cos with tan function