献上自己刚写的Jq圆形和扇形菜单插件，并且提供了几种特效供选择。自己也是第一次写这种圆形或者扇形的效果，因为要设计到三角函数的运算，自己数学很差哈，不过还是试试做了一下（还在纸上做了草稿，哈哈）。试着做了之后发现也没有想象中的难，现在献上方法以及代码。
先看一张效果图：
方法：
第一部：计算中心点的坐标，这个很简单，我们根据半径来很好计算。
第二部：计算出圆弧上的点的坐标，这个难点在于我们不知道有多少个点以及坐标的计算，因为菜单的数量是我们动态定的，绑定的Json格式的数据。所以，我们需要用360°来除以个数。来得出每个点所在的角度。然后我们通过sin和cos的计算，算出每个点的x和y的坐标，在计算的时候需要注意，Javascript提供的Math.sin()或者Math.cos()方法里面的不是度数，而是弧度。弧度与角度的计算公式也给出来哈：
弧度=raius*Math.PI/180（raius是度数）
第三部：动态效果，我们计算出每个点的最终坐标之后，动态效果就是Jq的Animate的事了，没什么难的哈。
Js插件代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
//菜单创建
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=$("<div class="item"></div>");
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;
}
}
}
|
