<!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>
