螺旋式選單

woff

插入  body 和 /body 之間即可
位置修改在程式中有明確說明
連結改為你自己的.

1. <script type="text/javascript">
   
2. eye={p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,isVertical:0,a1:0,a2:0,a3:0,color:'#ffffff',colorover:'#ffffff',backgroundcolor:'#0099ff',backgroundcolorover:'#000000',bordercolor:'#000000',fontsize:14,fontfamily:'Arial',pas:0,spinmenu:function(){this.p=this.r/this.s;this.a1=this.a2=this.isVertical?0:Math.PI/2},spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_blank\"")+")'";document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},muta:function(){a8=document.getElementById("controale");for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));a10=(this.p+xi)/(2*this.p);a11=this.fontsize*(this.p+xi)/(2*this.p)+2;a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;a10=(this.p+yi)/(2*this.p);a11=this.fontsize*(this.p+yi)/(2*this.p)+2;a12=parseInt(100*(this.p+yi)/(2*this.p))};a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;a9s.top=(yi+this.y-a14/2)+"px";a9s.left=(xi+this.x-a13/2)+"px";a9s.width=a13+"px";a9s.fontSize=a11+"px";a9s.zIndex=a12};a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;a8.style.left=this.x-a8.offsetWidth/2;if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v)this.a1+this.pas/this.v);if(Math.abs(this.a1-this.a2)<this.pas/this.v)
   
3. this.a1=this.a2;setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;document.write('<div id="controale" style="position:absolute"><button type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()" style="color:FFFFFF; height:15px; background-color:#3177BB; border:1">←我的</button> <button type="" onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()" style="color:FFFFFF; height:15px; background-color:#3177BB; border:1">網站→</button></div>');eye.muta()}};
   
4. function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}return totaloffset;
   
5. }
   
6. </script>
   
7. 
   
8. <script type="text/javascript">
   
9. eye.isVertical = 0; //if it's vertical or horizontal [0|1]
   
10. eye.x = 350; // 指定選單的左側位置
    
11. eye.y = 50; // 指定選單的上緣位置
    
12. eye.w = 150; // 指定這個特效的寬度
    
13. eye.h = 20; // 指定這個特效的高度
    
14. eye.r = 130; // menu's radius-半徑範圍
    
15. eye.v = 20; // velocity-速度
    
16. eye.s = 18; // scale in space (for 3D effect)
    
17. eye.color = '#ffffff'; // normal text color
    
18. eye.colorover = '#ffffff'; // mouseover text color
    
19. eye.backgroundcolor = '#0099ff'; // normal background color
    
20. eye.backgroundcolorover = '#990000'; // mouseover background color
    
21. eye.bordercolor = '#000000'; //border color
    
22. eye.fontsize = 14; // font size
    
23. eye.fontfamily = 'Arial'; //font family
    
24. if (document.getElementById){
    
25. document.write('<div id="spinanchor" style="height:'+eval(eye.h+20)+'"></div>')
    
26. eye.anchor=document.getElementById('spinanchor')
    
27. eye.spinmenu();
    
28. eye.x+=getposOffset(eye.anchor, "left") //relatively position it
    
29. eye.y+=getposOffset(eye.anchor, "top") //relatively position it
    
30. 
    
31. //menuitem: eye.spinmenuitem(text, link, target)
    
32. eye.spinmenuitem("軟硬體資料庫","http://p5.no-ip.org/");
    
33. eye.spinmenuitem("軟硬體工廠","http://xg31017.myweb.hinet.net/");
    
34. eye.spinmenuitem("C部落格","http://blog.xuite.net/city234.big/pcwork");
    
35. eye.spinmenuitem("新市隱形眼鏡公司","http://n2002.myweb.hinet.net/");
    
36. eye.spinmenuitem("我的民歌時代","http://blog.xuite.net/city234.big/music");
    
37. eye.spinmenuitem("快樂電腦家","http://p5.no-ip.org/disc6/ecshop/");
    
38. eye.spinmenuclose();
    
39. }
    
40. </script>

複製代碼

點擊再開啟檔案觀看演示: