极具创意的小球

下面为效果显示

脚本说明:
把如下代码加入<body>区域中
<STYLE type=text/css>DIV.clButtons {
	LEFT: 98px; VISIBILITY: inherit; WIDTH: 22px; POSITION: absolute; TOP: 6px; HEIGHT: 22px
}
#divCont {
	Z-INDEX: 30; VISIBILITY: hidden; WIDTH: 220px; CLIP: rect(0px 220px 220px 0px); POSITION: absolute; HEIGHT: 220px
}
#divCenter {
	LEFT: 10px; VISIBILITY: inherit; WIDTH: 200px; POSITION: absolute; TOP: 10px; HEIGHT: 200px
}
</STYLE>

<SCRIPT language=JavaScript type=text/javascript>
/**********************************************************************************   
CircleMenu 
*   Copyright (C) 2001 Thomas Brattli
*   This script was released at DHTMLCentral.com
*   Visit for more great scripts!
*   This may be used and changed freely as long as this msg is intact!
*   We will also appreciate any links you could give us.
*
*   Made by Thomas Brattli 
*********************************************************************************/

function lib_bwcheck(){ //Browsercheck (needed)
	this.ver=navigator.appVersion
	this.agent=navigator.userAgent
	this.dom=document.getElementById?1:0
	this.opera5=this.agent.indexOf("Opera 5")>-1
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; 
	this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
	this.ie=this.ie4||this.ie5||this.ie6
	this.mac=this.agent.indexOf("Mac")>-1
	this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0; 
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
	return this
}
var bw=new lib_bwcheck()

/***************************************************************************
Object constructors; making Cross-browser object of the buttons
****************************************************************************/
//Debug function ******************
function lib_message(txt){alert(txt); return false}

//Lib objects  ********************
function lib_obj(obj,nest,o){ 
	if(!bw.bw) return lib_message('Old browser')
	nest=(!nest) ? "":'document.'+nest+'.'										
   	if(o&&bw.ns4) this.evnt=o; 
	else this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;	
	if(!this.evnt) return lib_message('The layer does not exist ('+obj+') - \nIf your using Netscape please check the nesting of your tags!')
	this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt; this.ref=bw.dom||bw.ie4?document:this.css.document;
	this.x=this.css.left||this.css.pixelLeft||this.evnt.offsetLeft||0; this.y=this.css.top||this.css.pixelTop||this.evnt.offsetTop||0
	this.w=this.evnt.offsetWidth||this.css.clip.width||this.ref.width||this.css.pixelWidth||0; this.h=this.evnt.offsetHeight||this.css.clip.height||this.ref.height||this.css.pixelHeight||0
	this.c=0 //Clip values
	if((bw.dom || bw.ie4) && this.css.clip) {
		this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1); 
		this.c=this.c.split(' '); for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
	}
	this.ct=this.css.clip.top||this.c[0]||0; this.cr=this.css.clip.right||this.c[1]||this.w||0
	this.cb=this.css.clip.bottom||this.c[2]||this.h||0; this.cl=this.css.clip.left||this.c[3]||0
	this.obj = obj + "Object"; 	eval(this.obj + "=this")
	return this
}
//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){this.x=x;this.y=y; this.css.left=x;this.css.top=y}

//Showing object ************
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}

//Document size object ********
function lib_doc_size(){ 
	this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
	this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
	if(!this.x2||!this.y2) return message('Document has no width or height') 
	this.x50=this.x2/2;this.y50=this.y2/2;
	return this;
}

/***************************************************************************
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

/***************************************************************************
Initiating the buttons and starts the circlemove
****************************************************************************/
var xcenter,ycenter,menuState,circleGoing;
function init(num){
	page=new lib_doc_size()
	//Making a simple object for the divCont
	oCont=new lib_obj('divCont')
	//Moving the divCont to the center of the page.
	oCont.moveIt(page.x2/2-110,page.y2/2-110)
	//Making an array to hold the button objects
	oBut=new Array()
	//Making button objects, arguments: divName,nested div,anglestop
	for(i=0;i<6;i++){
		oBut[i]=new lib_obj('div'+i,'divCont')
	}
	//Setting stop angles for each button
	oBut[0].stop=0
	oBut[1].stop=30
	oBut[2].stop=-30
	oBut[3].stop=-90
	oBut[4].stop=-150
	oBut[5].stop=-210
	//Moves the button; ie5 bugfix
	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)
	oCont.showIt() //Showing cont layer
	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,lnk) {
	//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+"','"+lnk+"')",circleSpeed)
	}else{
	 	circleGoing=false
		eval(fn)
	}
}
/***************************************************************************
When click on the buttons
****************************************************************************/
var zIndex=5
function mclick(num,lnk){
	//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("'+lnk+'")')
		else moveFromCenter(lnk)
	}
}	
//Moving the buttons to the center
function moveCenter(lnk){
	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('"+lnk+"')",30)
	}else{	
		menuState=0
		if(lnk && String(lnk)!="undefined") location.href=lnk
		//HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
	}
}
//Moving the buttons from center
function moveFromCenter(lnk){
	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('"+lnk+"')",30)
	}else{	
		circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1',lnk)
	}
}
/***************************************************************************
Mouseover and out on the buttons
****************************************************************************/
function mover(num){
	oBut[num].ref["img"+num].src='circlemenu1_1.gif'
}
function mout(num){
	oBut[num].ref["img"+num].src='circlemenu'+(num+1)+'.gif'
}
//Starting the menu on pageload.	
onload=init;	
</SCRIPT>
<DIV id=divCont>
<DIV id=divCenter><IMG height=200 alt="" src="circlemenu.gif" width=200 
border=0 name=imgCenter></DIV>
<DIV class=clButtons id=div0><A onmouseover=mover(0) 
onclick="mclick(0); parent.focus(); return false" onmouseout=mout(0) 
href="#"><IMG height=22 
alt="" src="circlemenu1.gif" width=22 border=0 name=img0></A></DIV>
<DIV class=clButtons id=div1><A onmouseover=mover(1) 
onclick="mclick(1); parent.focus(); return false" onmouseout=mout(1) 
href="#"><IMG height=22 
alt="" src="circlemenu2.gif" width=22 border=0 name=img1></A></DIV>
<DIV class=clButtons id=div2><A onmouseover=mover(2) 
onclick="mclick(2); parent.focus(); return false" onmouseout=mout(2) 
href="#"><IMG height=22 
alt="" src="circlemenu3.gif" width=22 border=0 name=img2></A></DIV>
<DIV class=clButtons id=div3><A onmouseover=mover(3) 
onclick="mclick(3); parent.focus(); return false" onmouseout=mout(3) 
href="#"><IMG height=22 
alt="" src="circlemenu4.gif" width=22 border=0 name=img3></A></DIV>
<DIV class=clButtons id=div4><A onmouseover=mover(4) 
onclick="mclick(4); parent.focus(); return false" onmouseout=mout(4) 
href="#"><IMG height=22 
alt="" src="circlemenu5.gif" width=22 border=0 name=img4></A></DIV>
<DIV class=clButtons id=div5><A onmouseover=mover(5) 
onclick="mclick(5,'http://www.1stscript.com'); parent.focus(); return false" 
onmouseout=mout(5) 
href="#"><IMG height=22 
alt="" src="circlemenu6.gif" width=22 border=0 
name=img5></A></DIV></DIV>