|
第一步:請將下面script程式碼剪下貼至<head>區- <style>
- DIV{position:absolute}
- DIV.clButtons{width:22; height:22; left:98; top:6; visibility:inherit}
- #divCont{width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:visible}
- #divCenter{width:200; height:200; left:10; top:10; visibility:inherit}
- </style>
- <script>
- //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.stop) oBut.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.moveIt(oBut.x+(i-2.5),oBut.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.moveIt(oBut.x-(i-2.5),oBut.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>
複製代碼 第二步:在你的HTML文件中加入以下指令- <div id="divCont">
- <!-- Circle image -->
- <div id="divCenter"><img src="images/circle.gif" name="imgCenter" width=200 height=200 border=0 alt=""></div>
- <!-- Buttons -->
- <div id="div0" class="clButtons"><a href="#" onclick="mclick(0); parent.focus(); return false" onmouseover="mover(0)" onmouseout="mout(0)"><img src="images/1.gif" name="img0" width=22 height=22 border=0 alt=""></a></div>
- <div id="div1" class="clButtons"><a href="#" onclick="mclick(1); parent.focus(); return false" onmouseover="mover(1)" onmouseout="mout(1)"><img src="images/2.gif" name="img1" width=22 height=22 border=0 alt=""></a></div>
- <div id="div2" class="clButtons"><a href="#" onclick="mclick(2); parent.focus(); return false" onmouseover="mover(2)" onmouseout="mout(2)"><img src="images/3.gif" name="img2" width=22 height=22 border=0 alt=""></a></div>
- <div id="div3" class="clButtons"><a href="#" onclick="mclick(3); parent.focus(); return false" onmouseover="mover(3)" onmouseout="mout(3)"><img src="images/4.gif" name="img3" width=22 height=22 border=0 alt=""></a></div>
- <div id="div4" class="clButtons"><a href="#" onclick="mclick(4); parent.focus(); return false" onmouseover="mover(4)" onmouseout="mout(4)"><img src="images/5.gif" name="img4" width=22 height=22 border=0 alt=""></a></div>
- <div id="div5" class="clButtons"><a href="#" onclick="mclick(5); parent.focus(); return false" onmouseover="mover(5)" onmouseout="mout(5)"><img src="images/6.gif" name="img5" width=22 height=22 border=0 alt=""></a></div>
- </div>
複製代碼
您必須再下載附件 |
|