js实现扇形旋转导航制作

<div id="menu">
<!-- 飞出图标 -->
<div id="list">
<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 id="home"></div>
</div>

*{ margin: 0; p
4000
adding: 0; }
#menu{
width: 50px; height: 50px;
position: fixed;
right: 20px; bottom: 20px;
}
#list{
height: 42px; width: 42px;
position: relative;
margin: 4px;
}
#list img{
position: absolute;
border-radius: 50%;
left: 0; top: 0;
transition: 0.5s all ease;
}
#home{
width: 50px; height: 50px;
background: url(img/home.png) no-repeat;
border-radius: 25px;
position: absolute;
left: 0; top: 0;
transition: 1s;
}

window.onload=function(){

var hom=document.getElementById("home");
var imgs=document.getElementById("list").getElementsByTagName("img");

var onOff=true;
//设置旋转半径
var r=150;

//点击图标图标先变大"消失"再"重现"
for( var i=0;i<imgs.length;i++ ){
imgs[i].onclick=function(){
this.style.transition="0.3s"
this.style.WebkitTransform=" scale(2) ";
this.style.opacity="0";
addEnd( this,end);
};
}

function end(){
this.style.transition="0.3s";
this.style.WebkitTransform=" scale(1) ";
this.style.opacity=1;
removeEnd( this,end );
}

hom.onclick=function(){
//点击主按钮逆时针旋转，图标"飞出"
if( onOff ){
this.style.WebkitTransform="rotate(-720deg)";
for( var i=0;i<imgs.length;i++ ){
var olt=toLT(r,90/4*i);
imgs[i].style.transition=0.3+i*0.1+"s";
imgs[i].style.left=-olt.l+"px";
imgs[i].style.top=-olt.t+"px";
imgs[i].style.WebkitTransform="rotate(-720deg)";
}
}else{
//再次点击主按钮顺时针旋转，图标"收回"
this.style.WebkitTransform="rotate(720deg)";
for( var i=0;i<imgs.length;i++ ){
imgs[i].style.transition=0.3+(imgs.length-1-i)*0.1+"s";
imgs[i].style.left=0+"px";
imgs[i].style.top=0+"px";
imgs[i].style.WebkitTransform="rotate(0deg)";
}
}
onOff=!onOff;
}

function addEnd( obj,fn ){
//transitionend在 CSS 完成过渡后触发事件.
obj.addEventListener( 'WebkitTransitionEnd',fn,false );
obj.addEventListener( 'transitionend',fn,false );
}

function removeEnd( obj,fn ){
obj.removeEventListener( 'WebkitTranstionEnd',fn,false );
obj.removeEventListener( 'transitonend',fn,false );
}

function toLT( iR,iDeg ){
return { l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}
}
}