Arc

Define an Arc to traverse.

Clockwise
Anti-Clockwise

Arc Radius Pixels
Start Angle Degrees
 End Angle Degrees
Step Angle Degrees

stepAngle increases the angle by given value

Position x
Position y
startAngle + stepAngle

The above example shows how you can have an object move in an arc. Angles are usually measured in degrees but angles in Javascript are measured in radians.
The script automatically converts your input in degrees to radians.

The script allows you to traverse a path in an arc motion clockwise or anti-clockwise.
There are four values that you can set:

  1. startAngle - the angle at which the motion starts.
  2. endAngle - the angle at which the motion stops.
  3. stepAngle - the amount the angle increases during motion.
  4. Direction - true = clockwise, false = anti-clockwise. 

<script type="text/javascript">

<!--
function defaultPositions(){
startPosx=parseInt(document.getElementById("arc").style.left)
startPosy=parseInt(document.getElementById("arc").style.top)
Initialise()
}

function Initialise(){
Direction=true // true = clockwise, false = anti-clockwise
if(Direction==true){
Radian=0.017453292519943295} // Clockwise
else{Radian= -0.017453292519943295 } // Anti-Clockwise
Radius = 100 // pixels, Change to suit
startAngle = Radian * 0 // degrees, Change to suit
stepAngle = Radian * 5 // degrees, Change to suit
endAngle = Radian * 180 // degrees, Change to suit
A=startAngle
cx=startPosx-Radius
cy=startPosy //+Radius
timer=""
moveArc()
}

function moveArc(){
clearTimeout(timer)
A+=stepAngle
c=Math.cos(A)
s=Math.sin(A)
x=(Radius*c)+cx
y=(Radius*s)+cy
document.getElementById("arc").style.left=x
document.getElementById("arc").style.top=y

if(Direction==true){
reverseClockwise()}
else{
reverseAntiClockwise()}

timer=setTimeout("moveArc()",100)
} 

function reverseClockwise(){ // Reverse path in Clockwise direction
if(A>endAngle || A<startAngle){
stepAngle = -stepAngle
return
}
}

function reverseAntiClockwise(){ // Reverse path in Anti-Clockwise direction
if(A<endAngle || A>startAngle){
stepAngle = -stepAngle
return
}
}

setTimeout("defaultPositions()",2000)
// -->
</script>
<span id="arc" style="position:absolute; left:350;top:100; z-index:2">[ <font color="red">+</font> ]</span>