Cross-browser Dynamic HTML Demo - Circle animation demo

...דומח הז לבא ..בוט הז המל םכל רמאל הלוכי שממ אל
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Cross-browser Dynamic HTML Demo - Circle animation demo</TITLE>
<META content="text/html; charset=iso-8859-8" http-equiv=Content-Type>
<META content="Thomas Brattli (webmaster@bratta.com)" name=Author>
<META
content="DHTML, HTML, dhtml, html, demos, Javascript, VBscript, Cross-browser, Netscape4.0, IE4.0, Internet explorer, Dynamic HTML"
name=KeyWords>
<META content="Animated DHTML circle demo" name=Description>
<STYLE>DIV {
POSITION: absolute
}
DIV.clButtons {
HEIGHT: 22px; LEFT: 98px; TOP: 6px; VISIBILITY: inherit; WIDTH: 22px
}
#divCont {
CLIP: rect(0px 220px 220px 0px); HEIGHT: 220px; VISIBILITY: visible; WIDTH: 220px; Z-INDEX: 30
}
#divCenter {
HEIGHT: 200px; LEFT: 10px; TOP: 10px; VISIBILITY: inherit; WIDTH: 200px
}
</STYLE>

<SCRIPT>
/***************************************************************************
Copyright (C) 1999 Thomas Brattli
Code made by and copyrighted to Thomas Brattli from
www.bratta.com. Can be used freely as long as this message is instact
****************************************************************************/

//Simple browsercheck
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;

/***************************************************************************
Main variables
****************************************************************************/
//The radius for the circle
radius=92
//Start angle
startAngle=90
//Speed in milliseconds
circleSpeed=20
//angle to move per timeout
moveAngle=5

var xcenter;
var ycenter;
var menuState;
var circleGoing;

/***************************************************************************
Object constructors; making Cross-browser object of the buttons
****************************************************************************/
function makeButton(obj,nest,stop){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
this.x=(n)? this.css.left:this.css.pixelLeft;
this.y=(n)? this.css.top:this.css.pixelTop;
this.moveIt=b_moveIt
this.stop=stop
return this
}
function b_moveIt(x,y){
this.x=x; this.y=y
this.css.left=this.x
this.css.top=this.y
}
/***************************************************************************
Initiating the buttons and starts the circlemove
****************************************************************************/
function init(num){
//Getting the height and width of the document
pageWidth=(n)?innerWidth:document.body.offsetWidth;
pageHeight=(n)?innerHeight:document.body.offsetHeight;
//Making a simple object for the divCont
oCont=(n)?eval('document.divCont'):eval('divCont.style')
//Moving the divCont to the center of the page.
oCont.left=pageWidth/2-110
oCont.top=pageHeight/2-110
//Making an array to hold the button objects
oBut=new Array()
//Making button objects, arguments: divName,nested div,anglestop
oBut[0]=new makeButton('div0','divCont',0)
oBut[1]=new makeButton('div1','divCont',30)
oBut[2]=new makeButton('div2','divCont',-30)
oBut[3]=new makeButton('div3','divCont',-90)
oBut[4]=new makeButton('div4','divCont',-150)
oBut[5]=new makeButton('div5','divCont',-210)
//Moves the button; ie5 bugfix
if(ie) oBut[0].moveIt(98,6)
//Starts the circlemove
xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

}
/***************************************************************************
Moves the buttons in a circle
****************************************************************************/
function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn) {
//if angleinc < endangle-angle (no matter if it's positive or negative numbers)
if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
circleGoing=true
angle += angleinc
var x = xcenter + radius*Math.cos(angle*Math.PI/180)
var y = ycenter - radius*Math.sin(angle*Math.PI/180)
for(i=1;i<oBut.length;i++){
//if angle are bigger then the stop angle of each button
if(angle>=oBut[i].stop) oBut[i].moveIt(x,y)
}
setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"')",circleSpeed)
}else{
circleGoing=false
eval(fn)
}
}
/***************************************************************************
When click on the buttons
****************************************************************************/
var zIndex=5
function mclick(num){
//If it's not moving already
if(!circleGoing){
//Added feature; the clicked buttons stays on top!
zIndex++
oBut[num].css.zIndex=zIndex
//Checks the state of the menu and circles it the right way
if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter()')
else moveFromCenter()
}
}
//Moving the buttons to the center
function moveCenter(){
if(oBut[0].y<95){
for(i=0;i<oBut.length;i++){
oBut[i].moveIt(oBut[i].x+(i-2.5),oBut[i].y+3)
}
setTimeout("moveCenter()",30)
}else{
menuState=0
//HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
}
}
//Moving the buttons from center
function moveFromCenter(){
if(oBut[0].y>6){
for(i=0;i<oBut.length;i++){
oBut[i].moveIt(oBut[i].x-(i-2.5),oBut[i].y-3)
}
setTimeout("moveFromCenter()",30)
}else{
circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')
}
}
/***************************************************************************
Mouseover and out on the buttons
****************************************************************************/
function mover(num){
oBut[num].ref["img"+num].src='images/1_1.gif'
}
function mout(num){
oBut[num].ref["img"+num].src='images/'+(num+1)+'.gif'
}
//Starting the menu on pageload.
onload=init;
</SCRIPT>