html 圆形选择,html弹出圆形菜单

首页功能越来越多，放了好几个图片链接，然后链接还在不断增加，这时需要一个可扩展，又漂亮的菜单

网上找了个小插件吧，但是它的按钮位置什么的都是固定写死的，不好做扩展(源码找不到引用网址了)，现在我把按钮做成自动计算位置

先来个效果图(调试中，可能有点丑)

默认只显示1号按钮，点击1号，会弹出2/3/4/5/6

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

html代码

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