旋轉MENU

woff · 發表於 2008-9-23 20:51:28

第一步:請將下面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">
<div id="divCenter"><img src="images/circle.gif" name="imgCenter" width=200 height=200 border=0 alt=""></div>
<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>

複製代碼

您必須再下載附件

loxa0123 · 發表於 2013-11-14 00:16:43

一樓的位置好啊..

帳號		自動登錄		找回密碼
密碼				註冊

[教學] 旋轉MENU