haan
06-29-2003, 09:58 AM
In the HTML below there is a div going round following the curve of an ellips. Now I wonder if it could be changed so that 2 or even more div's can go round the same curve (one after the other). Can someone help?
This is the HTML for one div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<title>Closed Trajectory Movement</title>
<style>
body
{ font-family: Arial,sans-serif;
}
#target
{ position: absolute;
width: 10px;
height: 10px;
background: #000000;
}
</style>
<script>
var angle = 0;
var angleStep = 3;
var longR = 200;
var shortR = 100;
var Xo = 250;
var Yo = 150;
function moveTarget()
{ a = angle*Math.PI/180;
X = Math.floor(longR*Math.cos(a));
Y = Math.floor(shortR*Math.sin(a));
with(document.getElementById('target').style)
{ top = (Yo + Y) + 'px';
left = (Xo + X) + 'px';
}
angle+=angleStep;
angle = angle>359? angle-360:angle;
return;
}
</script>
</head>
<body onload="setInterval('moveTarget()',20)">
<div id="target"></div>
</body>
</html>
Haan
This is the HTML for one div:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<title>Closed Trajectory Movement</title>
<style>
body
{ font-family: Arial,sans-serif;
}
#target
{ position: absolute;
width: 10px;
height: 10px;
background: #000000;
}
</style>
<script>
var angle = 0;
var angleStep = 3;
var longR = 200;
var shortR = 100;
var Xo = 250;
var Yo = 150;
function moveTarget()
{ a = angle*Math.PI/180;
X = Math.floor(longR*Math.cos(a));
Y = Math.floor(shortR*Math.sin(a));
with(document.getElementById('target').style)
{ top = (Yo + Y) + 'px';
left = (Xo + X) + 'px';
}
angle+=angleStep;
angle = angle>359? angle-360:angle;
return;
}
</script>
</head>
<body onload="setInterval('moveTarget()',20)">
<div id="target"></div>
</body>
</html>
Haan