<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
width: 50px;
height: 50px;
position: fixed;
border: 1px solid;
border-radius: 50%;
right: 10px;
bottom: 10px;
}
#wrap>.inner{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
}
#wrap>.inner>img{
width: 40px;
height: 40px;
margin: 4px;
border-radius: 50%;
position: absolute;
}
#wrap>.home{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
}
</style>
<body>
<div id="wrap">
<div class="inner">
<img src="./img/clos.png" alt="">
<img src="./img/full.png" alt="">
<img src="./img/open.png" alt="">
<img src="./img/prev.png" alt="">
<img src="./img/refresh.png" alt="">
</div>
<div class="home">
<img src="./img/home.png" alt="">
</div>
</div>
<script>
window.onload = function(){
var home = document.querySelector(".home");
var imgs = document.querySelectorAll("img");
var flag = true;
var c = 140;
home.onclick = function(){
if(flag){
this.style.transform = "rotate(-270deg)";
for(i = 0;i<imgs.length;i++){
imgs[i].style.transition="1s "+(i*0.1)+"s"
imgs[i].style.transform = "rotate(-270deg)";
imgs[i].style.left = -getPoint(c,90*i/(imgs.length-1)).left+"px";
imgs[i].style.top = -getPoint(c,90*i/(imgs.length-1)).top+"px";
}
}else{
this.style.transform = "rotate(0deg)";
for(var i=0;i<imgs.length;i++){
imgs[i].style.transition="1s "+((imgs.length-1-i)*0.1)+"s";
imgs[i].style.transform="rotate(0deg)"
imgs[i].style.left = 0+"px";
imgs[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>
