html弹出圆形菜单

首页功能越来越多，放了好几个图片链接，然后链接还在不断增加，这时需要一个可扩展，又漂亮的菜单
网上找了个小插件吧，但是它的按钮位置什么的都是固定写死的，不好做扩展（源码找不到引用网址了），现在我把按钮做成自动计算位置
先来个效果图（调试中，可能有点丑）

默认只显示1号按钮，点击1号，会弹出2/3/4/5/6
这几个按钮的图片都可以更换，其中6号为没有添加图片的按钮，2/3/4/5/6的位置都是使用js计算得到的，他们的偏转角度，与1号的距离，都可以修改，每次增加新的按钮或链接时，只需要按照规则，加一行html代码就可以了
html代码

<div class="wrap" id="extend_menu" style="" >
  <div id="icon_menu" "ExtendMenuClick()">
     <img src="image/ext_menu.png" />
        <span id="mspan"></span>
    </div>
    <a href="#" class="ex_btn" id="ex_btn1"><img src="image/orderdinner.png" /><span></span></a>
    <a href="#" class="ex_btn" id="ex_btn2"><img src="image/artworks.png" /><span></span></a>
    <a href="#" class="ex_btn" id="ex_btn3"><img src="image/cx.png" /><span></span></a>
    <a href="#" class="ex_btn" id="ex_btn4"><img src="image/ext_menu.png" /><span></span></a>
    <a href="#" class="ex_btn" id="ex_btn5"><img src="" /><span></span></a>
</div>

css代码

.wrap{
    width:52px;
    height:57px;
    position:fixed;
    right:0;
    bottom:0;
}
#icon_menu{
    position:absolute;
    bottom:100px;
    right:0px;
    z-index:10;
    cursor:pointer;
}
#icon_menu img{
    width:60px;
    height:60px;
}
#icon_menu span{
    display:none;
}
.ex_btn{
    width:52px;
    height:57px;
    background:url(../image/ext_bac.png) no-repeat -78px -6px;
    z-index:1;
    position:absolute;
    bottom:100px;
    right:0;
    margin:0 5px 2px 0;
    cursor:pointer;
}
.ex_btn img{
    display:block;
    width:43px;
    height:43px;
    font-size:0;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-21px;
    margin-left:-20px;
    overflow:hidden;
}
.ex_btn{-webkit-transition:bottom .2s,right .2s;-moz-transition:bottom .2s,right .2s;-o-transition:bottom .2s,right .2s;-ms-transition:bottom .2s,right .2s;transition:bottom .2s,right .2s;}

js代码

/// 扩展菜单点击
function ExtendMenuClick() {
    let span = $("#wrap").find("img");
    let cl = document.getElementById("icon_menu").getElementsByClassName("open_menu");
    if (cl.length > 0) {
        CloseExtendMenu(span);
    } else {
        OpenExtendMenu(span);
    }
}

/// 打开
function OpenExtendMenu(span) {
    let l = document.getElementById("extend_menu").getElementsByTagName("span").length;
    for (let i = 1; i < l ; i++) {
        let ar = GetNewPosition(i);
        EditSpanPosition(document.getElementById("ex_btn" + i), ar[0], ar[1]);
    }
    $("#mspan").addClass("open_menu");
}

/// 关闭
function CloseExtendMenu(span) {
    let l = document.getElementById("extend_menu").getElementsByTagName("span").length;
    for (let i = 1; i < l ; i++) {
        EditSpanPosition(document.getElementById("ex_btn" + i), 100, 0);
    }
    $("#mspan").removeClass("open_menu");
}

/// 修改弹出按钮位置
function EditSpanPosition(dom,bottom, right) {
    dom.style.bottom = bottom + "px";
    dom.style.right = right + "px";
}

// 获取要移动到的位置
function GetNewPosition(i) {
    let obottom = $(window).height() - $("#icon_menu").offset().top - 40;  // 按钮距底部距离
    let oright = $(window).width() - $("#icon_menu").offset().left - 20;     // 按钮距右侧距离
    let oLength = 100;  // 弹出长度
    // let angle = 45;     // 弹出角度
    let radian = 0.8 * i - 1;     // 弹出弧度
    let nbottom = obottom + Math.cos(radian) * oLength;
    let nright = oright + Math.sin(radian) * oLength;
    return [nbottom, nright];
}

如果需要修改按钮距离，偏转角度，就改一下js的GetNewPosition方法，改按钮大小就该css