献上自己刚写的Jq圆形和扇形菜单插件，并且提供了几种特效供选择。自己也是第一次写这种圆形或者扇形的效果，因为要设计到三角函数的运算，自己数学很差哈，不过还是试试做了一下（还在纸上做了草稿，哈哈）。试着做了之后发现也没有想象中的难，现在献上方法以及代码。

先看一张效果图：

方法：

第一部：计算中心点的坐标，这个很简单，我们根据半径来很好计算。

第二部：计算出圆弧上的点的坐标，这个难点在于我们不知道有多少个点以及坐标的计算，因为菜单的数量是我们动态定的，绑定的Json格式的数据。所以，我们需要用360°来除以个数。来得出每个点所在的角度。然后我们通过sin和cos的计算，算出每个点的x和y的坐标，在计算的时候需要注意，Javascript提供的Math.sin()或者Math.cos()方法里面的不是度数，而是弧度。弧度与角度的计算公式也给出来哈：

弧度=raius*Math.PI/180（raius是度数）

第三部：动态效果，我们计算出每个点的最终坐标之后，动态效果就是Jq的Animate的事了，没什么难的哈。

Js插件代码：

//菜单创建
var CirMenuHandler={
	radiusLength:100,//半径
	radiusPointX:0,  //X坐标
	radiusPointY:0,  //Y坐标
	radiusParent:null, //父级容器
	radiusShowTag:0, //效果模式
	//菜单项数据
	radiusMenuData:[
	                {"name":"01","ico":"cir1.png"},
					{"name":"02","ico":"cir2.png"},
					{"name":"03","ico":"cir3.png"},
					{"name":"04","ico":"cir4.png"},
					{"name":"05","ico":"cir5.png"},
					{"name":"06","ico":"cir6.png"},
					{"name":"08","ico":"cir1.png"},
					{"name":"09","ico":"cir2.png"},
					{"name":"10","ico":"cir3.png"},
					{"name":"11","ico":"cir4.png"},
					{"name":"12","ico":"cir5.png"}
	               ],
	Init:function(){
	   CirMenuHandler.radiusParent=$("#MainDiv");
	   CirMenuHandler.radiusPointY=CirMenuHandler.radiusPointX=CirMenuHandler.radiusLength 24;
	   $(".itemCenter").css("margin-top",CirMenuHandler.radiusPointX "px").css("margin-left",CirMenuHandler.radiusPointY "px");

	   $(".itemCenter").click(function(){
		  $(".item").length==0?CirMenuHandler.RadiusShow():CirMenuHandler.RadiusHide();
	   });
	},
	//创建并显示菜单
	RadiusShow:function(){
		 var itemCount=CirMenuHandler.radiusMenuData.length;
	     var itemRadian=Number(360/itemCount);
		 for(var i=0;i<CirMenuHandler.radiusMenuData.length;i  ){
		       var raius=itemRadian*i;
		       var x=Math.sin(raius*Math.PI/180)*CirMenuHandler.radiusLength CirMenuHandler.radiusPointX;
			   var y=CirMenuHandler.radiusPointY-Math.cos(raius*Math.PI/180)*CirMenuHandler.radiusLength;
			   var item1=$("");
			   item1.css("background-image","url(" CirMenuHandler.radiusMenuData[i].ico ")");
			   item1.css("margin-left",CirMenuHandler.radiusPointX "px").css("margin-top",CirMenuHandler.radiusPointY "px");
			   CirMenuHandler.radiusParent.append(item1);
			   switch(CirMenuHandler.radiusShowTag){
				   case 0:
				     item1.animate({marginLeft:x "px",marginTop:y "px"},300);
				   break;   
				   case 1:
				    item1.animate({marginLeft:x "px",marginTop:y "px"},200 i*30);
				   break;
				   case 2:
				    item1.animate({marginLeft:x "px",marginTop:y "px"},200 (CirMenuHandler.radiusMenuData.length-i)*30);
				   break;
				   case 3:
				    item1.css("margin-left",CirMenuHandler.radiusPointX "px").css("margin-top",24 "px");
					 item1.animate({marginLeft:x "px",marginTop:y "px"},300);
				   break;
			   }   
	   }
	},
	//隐藏并移除菜单
	RadiusHide:function(){
		switch(CirMenuHandler.radiusShowTag){
				   case 0:
				    $(".item").animate({marginLeft:CirMenuHandler.radiusPointX "px",marginTop:CirMenuHandler.radiusPointY "px"},300,function(){$(this).remove();});
				   break;
				    case 1:
					for(var i=0;i<$(".item").length;i  ){
						$($(".item")[i]).animate({marginLeft:CirMenuHandler.radiusPointX "px",marginTop:CirMenuHandler.radiusPointY "px"},200 i*30,function(){$(this).remove();});
					}
				   break;
				    case 2:
					for(var i=0;i<$(".item").length;i  ){
						$($(".item")[i]).animate({marginLeft:CirMenuHandler.radiusPointX "px",marginTop:CirMenuHandler.radiusPointY "px"},200 (CirMenuHandler.radiusMenuData.length-i)*30,function(){$(this).remove();});
					}
				   break;
				   case 3:
				   $(".item").animate({marginLeft:CirMenuHandler.radiusPointX "px",marginTop:24 "px"},300,function(){$(this).remove();});
				   break;
			   }	
	}
}