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