js实现弧形菜单特效

最新推荐文章于 2024-05-08 14:40:55 发布

weixin_33974433

最新推荐文章于 2024-05-08 14:40:55 发布

阅读量1.1k

点赞数

文章标签： javascript java 前端 ViewUI

原文链接：https://my.oschina.net/tnjin/blog/625550

版权

为什么80%的码农都做不了架构师？>>>

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

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

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

转载于:https://my.oschina.net/tnjin/blog/625550