导航

js实现弧形菜单特效

Posted on 2013-05-17 20:38  tnjin  阅读(1027)  评论(0)    收藏  举报

前一阵子,因为做安卓项目,需要用到一个弧形菜单的效果,园子里有一份是用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() } }