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()
            }
        
        }

 

 

你可能感兴趣的:(js实现弧形菜单特效)