自定义扇形菜单
1、材料图
2、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扇形菜单</title>
<style>
html,body {
height: 100%;
overflow: hidden;
}
div {
width: 126px;
height: 126px;
border-radius: 50%;
background: url("./test.jpg");
position: absolute;
bottom: 0;
right: 0;
}
.main {
background-position: 0px -126px;
z-index: 2;
transition: 2s;
}
.img1 {
background-position: -126px -126px;
}
.img2 {
background-position: -252px -126px;
}
.img3 {
background-position: -381px -126px;
}
.img4 {
background-position: -510px -126px;
}
</style>
</head>
<body>
<div class="main"></div>
<div class="other img1"></div>
<div class="other img2"></div>
<div class="other img3"></div>
<div class="other img4"></div>
</body>
<script>
var main = document.getElementsByClassName("main")[0]
var imgs = document.getElementsByClassName("other")
var flag = false
// 关闭的时候需要打开菜单
main.onclick = function () {
if (!flag) {
main.style.transform = "rotate(720deg)";
flag = true
for (let i=0;i<imgs.length;i++) {
imgs[i].style.transition="1s"
imgs[i].style.transitionDelay = i*0.1 + "s"
imgs[i].style.right = getPosition(i).left + "px"
imgs[i].style.bottom = getPosition(i).top + "px"
}
} else {
main.style.transform = "rotate(0deg)"
for (var i=0;i<imgs.length;i++) {
imgs[i].style.transitionDelay = (imgs.length-i-1)*0.1 + "s"
imgs[i].style.right = 0 + "px"
imgs[i].style.bottom = 0 + "px"
}
flag = false
}
}
function getPosition(i) {
var v = 300
var left = Math.sin(i * 30 * Math.PI/180) * v
var top = Math.cos(i * 30 * Math.PI/180) * v
return {
left:left,
top:top
}
}
</script>
</html>
