how to rotate a image around circle using javascript
CODE :
<head>
<title>Circle Animation</title>
<script type="text/javascript"> <!--
var win; // Window - used for width and height measurement
var cx, cy, x, y; // center xy, radius xy
var centerOffset = 12;
var orbiterOffset = 64;
var radius = 200;
var centerDiv;
var controlDiv;
var orbiter;
var startAngle = 90; // top of circle
var currentAngle = 90;
var interval = 25; // milliseconds
// --></script>
<style type="text/css">
..style1 {
border-style: solid;
border-width: 0px;
}
</style>
</head>
<body>
<div id="centerDiv" style="position:absolute; font-size:24px;">hello </div>
<img src="b.jpg" id="chutney"
style="position:absolute"/>
<div style="position: absolute; left: 10px; top: 313px; width: 95px; height:
30px; z-index: 2" id="buttons">
<form>
<table class="style1">
<tr>
<td>
<input name="Button1" type="button" value="Start"
onclick="startOrbiter()"/> </td>
<td>
<input name="Button2" type="button" value="Stop"
onclick="stopOrbiter()"/> </td>
</tr>
</table>
</form>
</div>
<script type="text/javascript"> <!--
win = document.getElementsByTagName("body")[0];
var timerID;
cx = win.offsetWidth / 2;
cy = win.parentNode.clientHeight / 2;
x = cx;
y = cy - radius;
centerDiv = document.getElementById("centerDiv");
orbiter = document.getElementById("chutney");
controlDiv = document.getElementById("buttons");
function pixelStyle(i)
{
return i + "px";
}
function getCoords()
{
currentAngle = currentAngle - 1 < 0 ? 359 : currentAngle - 1;
x = cx + radius * Math.cos(currentAngle * Math.PI / 180);
y = cy - radius * Math.sin(currentAngle * Math.PI / 180);
}
function moveOrbiter()
{
getCoords();
orbiter.style.left = pixelStyle(x - orbiterOffset);
orbiter.style.top = pixelStyle(y - orbiterOffset);
}
function startOrbiter()
{
timerID = setInterval("moveOrbiter()", interval);
}
function stopOrbiter()
{
clearInterval(timerID);
}
controlDiv.style.left = pixelStyle(cx - 50);
controlDiv.style.top = pixelStyle(win.parentNode.clientHeight - 50);
centerDiv.style.left = pixelStyle(cx - centerOffset);
centerDiv.style.top = pixelStyle(cy - centerOffset);
orbiter.style.left = pixelStyle(x - orbiterOffset);
orbiter.style.top = pixelStyle(y - orbiterOffset);
// --></script>
</body>
</html>
No comments:
Post a Comment