js实现弧形菜单特效

前一阵子，因为做安卓项目，需要用到一个弧形菜单的效果，园子里有一份是用java代码写的模仿path的（这玩意我都没听过啊），无奈，小弟不才，没有办法应用在我的Jquery-Mobile+PhoneGap的项目中，于是自己写一份来。

其实不难，各位大神见到我的代码请轻拍。

<!-----不会传图片 哎o(︶︿︶)o 唉---->

var show=false;
//初始化，其实是因为我不会控制转场的时间，导致我的代码在转场前就运行了，所以才写的这么一个函数
function inittool_m (){
$("#mapdisplay").append('<img class="tool_m" onclick="ClearScreen()" src="jquery-mobile/lib/images/map_clear1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px" >
<img class="tool_m"  src="jquery-mobile/lib/images/map_measureL1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px;">
<img class="tool_m" "  src="jquery-mobile/lib/images/map_measureP1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px">
<img class="tool_m"  src="jquery-mobile/lib/images/map_zoomin1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px">
<img class="tool_m"  src="jquery-mobile/lib/images/map_zoomout1.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px">
<img class="tool_m" src="jquery-mobile/lib/images/geoLoca.png" width="50" height="25" style="position:absolute;right:0px;bottom:0px">')
}

//显示，按照屏幕右下角，发散
function tool_m_show(){
//alert("i")
var r=150;
var imgs=$(".tool_m");
var len=imgs.length;
var angl=Math.PI/(len-2)/2;
$.each(imgs,function(index,img){
if(index==len-1){
$(img).fadeIn(200);
return;}
var i=index;
var ang=angl*i;
var p_x=Math.floor(r*Math.sin(ang));
var p_y=Math.floor(r*Math.cos(ang));
$(img).animate({
right:p_x,
bottom:p_y,
},"slow").fadeIn(200);
})
show=true;
}
//收缩
function tool_m_hide(){
var imgs=$(".tool_m");

$.each(imgs,function(index,img){
$(img).animate({right:0,bottom:0},"slow").fadeOut(200);
})
show=false;
}
//toggle
function toggleTool_m(obj){
var imgs=$(".tool_m");
//alert($(imgs[0]).css('right'))
if(show){
tool_m_hide();
}else{
tool_m_show()
}

}