TShopping

 找回密碼
 註冊
搜索
查看: 1209|回復: 1

[教學] 旋轉MENU

[複製鏈接]
發表於 2008-9-23 20:51:28 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
第一步:請將下面script程式碼剪下貼至<head>區
  1. <style>
  2. DIV{position:absolute}
  3. DIV.clButtons{width:22; height:22; left:98; top:6; visibility:inherit}
  4. #divCont{width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:visible}
  5. #divCenter{width:200; height:200; left:10; top:10; visibility:inherit}
  6. </style>
  7. <script>
  8. //Simple browsercheck
  9. var n = (document.layers) ? 1:0;
  10. var ie = (document.all) ? 1:0;

  11. /***************************************************************************
  12. Main variables
  13. ****************************************************************************/
  14. //The radius for the circle
  15. radius=92
  16. //Start angle
  17. startAngle=90
  18. //Speed in milliseconds
  19. circleSpeed=20
  20. //angle to move per timeout
  21. moveAngle=5

  22. var xcenter;
  23. var ycenter;
  24. var menuState;
  25. var circleGoing;

  26. /***************************************************************************
  27. Object constructors; making Cross-browser object of the buttons
  28. ****************************************************************************/
  29. function makeButton(obj,nest,stop){
  30.         nest=(!nest) ? '':'document.'+nest+'.'                                                                          
  31.         this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')                                                            
  32.     this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');            
  33.         this.x=(n)? this.css.left:this.css.pixelLeft;
  34.         this.y=(n)? this.css.top:this.css.pixelTop;                                                                                                     
  35.         this.moveIt=b_moveIt                                                                           
  36.         this.stop=stop         
  37.         return this
  38. }
  39. function b_moveIt(x,y){
  40.         this.x=x; this.y=y
  41.         this.css.left=this.x
  42.         this.css.top=this.y
  43. }
  44. /***************************************************************************
  45. Initiating the buttons and starts the circlemove
  46. ****************************************************************************/
  47. function init(num){
  48.         //Getting the height and width of the document
  49.         pageWidth=(n)?innerWidth:document.body.offsetWidth;
  50.         pageHeight=(n)?innerHeight:document.body.offsetHeight;
  51.         //Making a simple object for the divCont
  52.         oCont=(n)?eval('document.divCont'):eval('divCont.style')
  53.         //Moving the divCont to the center of the page.
  54.         oCont.left=pageWidth/2-110
  55.         oCont.top=pageHeight/2-110
  56.         //Making an array to hold the button objects
  57.         oBut=new Array()
  58.         //Making button objects, arguments: divName,nested div,anglestop
  59.         oBut[0]=new makeButton('div0','divCont',0)
  60.         oBut[1]=new makeButton('div1','divCont',30)
  61.         oBut[2]=new makeButton('div2','divCont',-30)
  62.         oBut[3]=new makeButton('div3','divCont',-90)
  63.         oBut[4]=new makeButton('div4','divCont',-150)
  64.         oBut[5]=new makeButton('div5','divCont',-210)
  65.         //Moves the button; ie5 bugfix
  66.         if(ie) oBut[0].moveIt(98,6)
  67.         //Starts the circlemove
  68.         xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
  69.         ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
  70.         circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

  71. }
  72. /***************************************************************************
  73. Moves the buttons in a circle
  74. ****************************************************************************/
  75. function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn) {
  76.         //if angleinc < endangle-angle (no matter if it's positive or negative numbers)
  77.         if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
  78.                 circleGoing=true

  79.                 angle += angleinc

  80.                 var x = xcenter + radius*Math.cos(angle*Math.PI/180)
  81.                 var y = ycenter - radius*Math.sin(angle*Math.PI/180)
  82.                 for(i=1;i<oBut.length;i++){

  83.                         //if angle are bigger then the stop angle of each button
  84.                         if(angle>=oBut.stop) oBut.moveIt(x,y)
  85.                 }
  86.                 setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"')",circleSpeed)
  87.         }else{
  88.                 circleGoing=false
  89.                 eval(fn)
  90.         }
  91. }
  92. /***************************************************************************
  93. When click on the buttons
  94. ****************************************************************************/
  95. var zIndex=5
  96. function mclick(num){
  97.         //If it's not moving already
  98.         if(!circleGoing){
  99.                 //Added feature; the clicked buttons stays on top!
  100.                 zIndex++
  101.                 oBut[num].css.zIndex=zIndex
  102.                 //Checks the state of the menu and circles it the right way
  103.                 if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter()')
  104.                 else moveFromCenter()
  105.         }
  106. }      
  107. //Moving the buttons to the center
  108. function moveCenter(){
  109.         if(oBut[0].y<95){

  110.                 for(i=0;i<oBut.length;i++){

  111.                         oBut.moveIt(oBut.x+(i-2.5),oBut.y+3)
  112.                 }
  113.                 setTimeout("moveCenter()",30)
  114.         }else{  
  115.                 menuState=0

  116.                 //HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
  117.         }
  118. }
  119. //Moving the buttons from center
  120. function moveFromCenter(){
  121.         if(oBut[0].y>6){
  122.                 for(i=0;i<oBut.length;i++){

  123.                         oBut.moveIt(oBut.x-(i-2.5),oBut.y-3)
  124.                 }
  125.                 setTimeout("moveFromCenter()",30)
  126.         }else{  
  127.                 circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

  128.         }
  129. }
  130. /***************************************************************************
  131. Mouseover and out on the buttons
  132. ****************************************************************************/
  133. function mover(num){
  134.         oBut[num].ref["img"+num].src='images/1_1.gif'

  135. }
  136. function mout(num){
  137.         oBut[num].ref["img"+num].src='images/'+(num+1)+'.gif'

  138. }
  139. //Starting the menu on pageload.        
  140. onload=init;   
  141. </script>
複製代碼
第二步:在你的HTML文件中加入以下指令
  1. <div id="divCont">
  2. <!-- Circle image -->
  3.         <div id="divCenter"><img src="images/circle.gif" name="imgCenter" width=200 height=200 border=0 alt=""></div>
  4. <!-- Buttons -->
  5.         <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>
  6.         <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>
  7.         <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>
  8.         <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>
  9.         <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>
  10.         <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>

  11. </div>
複製代碼


您必須再下載附件

 

臉書網友討論

本帖子中包含更多資源

您需要 登錄 才可以下載或查看,沒有帳號?註冊

x
發表於 2013-11-14 00:16:43 | 顯示全部樓層
一樓的位置好啊..  

版主招募中

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-10 07:43 , Processed in 0.056514 second(s), 20 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表