扇形导航

CSS代码如下：

<!doctype html>
<html lang="en">

    <head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html,
body {
height: 100%;
overflow: hidden;
}

#wrap {
position: fixed;
right: 15px;
bottom: 15px;
width: 50px;
height: 50px;
/*background: pink;*/
}

#wrap>#inner>img {
position: absolute;
left: 0;
top: 0;
margin: 4px;
border-radius: 50%;
/*transition: 1s;*/
}

#wrap>.home {
position: absolute;
height: 100%;
/*background: red;*/
width: 100%;
z-index: 99;
background: url(img/home.png) no-repeat;
border-radius: 50%;
transition: 2s;
}

*/
</style>

        <script type="text/javascript">
window.onload = function() {
var homeEle = document.querySelector('.home')
var flag = true
var imgs=document.querySelectorAll('#wrap>#inner>img ')
var c=140;
function fn(){
this.style.transition='0.3s'
this.style.transform='rotate(0deg) scale(1)'
this.style.opacity=1
removeEventListener('transitionend',fn);
}

for(var i=0;i<imgs.length;i++){
imgs[i].οnclick=function(){
this.style.transform='scale(2)'
this.style.opacity=0.5
//添加一个监听器
this.addEventListener('transitionend',fn)
}
}

homeEle.onclick = function() {
if(flag) {
this.style.transform = 'rotate(-720deg) scale(1)';
for(var i=0;i<imgs.length;i++){
imgs[i].style.transition="1s "+(i*0.15)+'s'
imgs[i].style.transform='rotate(-720deg)'
imgs[i].style.left=-getPoint(c,i*90/(imgs.length-1)).left+'px';
imgs[i].style.top=-getPoint(c,i*90/(imgs.length-1)).top+'px';

}
}else{
this.style.transform='rotate(0deg) scale(1)';
for(var i=0;i<imgs.length;i++){
imgs[imgs.length-1-i].style.transition='1s '+(i*0.15)+'s'
imgs[i].style.transform='rotate(0deg) scale(1)'
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>
</head>

    <body>
<div id="wrap">
<div id="inner">
<img src="img/clos.png" />
<img src="img/full.png" />
<img src="img/open.png" />
<img src="img/prev.png" />
<img src="img/refresh.png" />
</div>
<div class="home"></div>
</div>
</body>

</html>