导航栏.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.outer{
width: 49px;
height: 49px;
position: fixed;
right: 0;
bottom: 0;
}
.home{
background: url("./img_navi/home.png") center center no-repeat;
position: relative;
z-index: 1;
border-radius: 50%;
width: 49px;
height: 49px;
transition: all .5s linear;
}
.list{
width: 42px;
height: 42px;
position: absolute;
left: 4px;
top: 9px;
border-radius: 50%;
}
.list li {
width: 42px;
height: 42px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
.list li:nth-child(1){
background: url("./img_navi/open.png") center center no-repeat;
}
.list li:nth-child(2){
background: url("./img_navi/clos.png") center center no-repeat;
}
.list li:nth-child(3){
background: url("./img_navi/full.png") center center no-repeat;
}
.list li:nth-child(4){
background: url("./img_navi/refresh.png") center center no-repeat;
}
.list li:nth-child(5){
background: url("./img_navi/prev.png") center center no-repeat;
}
</style>
</head>
<body>
<div class="outer">
<div class="home"></div>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var oHome = document.querySelector(".home");
var oLis = document.querySelectorAll("ul li");
var r = 200;//自定义一个半径长
var flag = true;
oHome.onclick = function () {
if(flag){
oHome.style.transform = "rotate(-360deg)";
oLis.forEach(function (item,index,arr) {
//转换为弧度计算，js中 sin 、cos 、tan 里面只能用弧度
item.style.left = - Math.sin(index * 90/(oLis.length-1) * Math.PI /180) * r +"px";
item.style.top = - Math.cos(index * 90/(oLis.length-1) * Math.PI /180) * r +"px";
item.style.transform = "rotate(360deg)";
//延迟不同的时间
item.style.transition = "all .5s linear "+ 0.1 * index+"s";
})
}else {
oHome.style.transform = "rotate(0deg)";
oLis.forEach(function (item,index,arr) {
item.style.left = 0 +"px";
item.style.top = 0 +"px";
item.style.transform = "rotate(0deg)";
//延迟不同的时间
item.style.transition = "all .5s linear"+ 0.1 * (oLis.length - index)+"s";
})
}
flag = !flag;
}
oLis.forEach(function (item,index) {
item.onclick = function () {
//记得加上前面的效果rotate(360deg)，有覆盖的问题
this.style.transform = "rotate(360deg) scale(1.2)";
this.style.transition = "all 0.5s linear";
function fn1() {
this.style.transform = "rotate(360deg) scale(1)";
this.removeEventListener("transitionend",fn1);
}
this.addEventListener("transitionend" ,fn1 ,false);
}
})
</script>
</body>
</html>
