<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扇形导航</title>
</head>
<style>
body,
html {
height: 100%;
overflow: hidden;
}
#wrap {
position: fixed;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
right: 10px;
bottom: 10px;
text-align: center;
line-height: 50px;
}
.inner {
height: 100%;
}
.inner span {
display: block;
width: 100%;
height: 100%;
position: absolute;
background-color: #000;
z-index: 1;
border-radius: 50%;
color: #fff;
left: 0;
top: 0;
}
.home {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: yellowgreen;
border-radius: 50%;
z-index: 9;
transition: .5s;
}
</style>
<body>
<div id="wrap">
<div class="inner">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div class="home">
1
</div>
</div>
<script>
window.onload = function() {
//获取类 .home
var homeEl = document.querySelector(“.home”);
//获取全部.inner > span
var spans = document.querySelectorAll(“.inner > span”);
var flag = true;
var c = 140;
//fn()函数
function fn() {
this.style.transition = “.3s”;
this.style.transform = “rotate(-720deg) scale(1)”;
this.style.opacity = 1;
this.removeEventListener(“transitionend”, fn)
}
//点击菜单触发的效果
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
this.style.transition = “.5s”;
this.style.transform = “rotate(-720deg) scale(1.5)”;
this.style.opacity = 0.1;
this.addEventListener(“transitionend”, fn);
}
}
//点击home键展开菜单
homeEl.onclick = function() {
if (flag) {
this.style.transform = “rotate(-720deg) scale(1)”;
for (var i = 0; i < spans.length; i++) {
spans[i].style.transition = “all 1s ease “ + (i
.1) + “s”;
spans[i].style.transform = “rotate(-720deg) scale(1)”;
spans[i].style.left = -getPoint(c, 90
i / (spans.length - 1)).left + “px”;
spans[i].style.top = -getPoint(c, 90
i / (spans.length - 1)).top + “px”;
}
} else {
this.style.transform = “rotate(0)”;
for (var i = 0; i < spans.length; i++) {
spans[i].style.transform = “rotate(0) scale(1)”;
spans[i].style.transition = “1s “ + ((spans.length - 1 - i)
.1) + “s”;
spans[i].style.left = 0 + “px”;
spans[i].style.top = 0 + “px”;
}
}
flag = !flag;
};
//计算菜单旋转出去的坐标
function getPoint(c, deg) {
var x = Math.round(c
Math.sin(deg
Math.PI / 180));
var y = Math.round(c
Math.cos(deg
Math.PI / 180));
return {
left: x,
top: y
}
}
};
</script>
</body>
</html>
