代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <title>扇形导航</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <style> *{ margin:0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{ width: 50px; height: 50px; position: fixed; right: 15px; bottom: 15px; } #wrap>.inner{ height: 100%; } #wrap>.inner>img{ position: absolute; left: 0; top: 0; margin: 4px; border-radius: 50%; } #wrap>.home{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: url("img/home.png") no-repeat; z-index: 1; transition: 2s; border-radius: 50%; } </style> </head> <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"> </div> </div> </body> <script type="text/javascript"> window.onload=function () { var homeEle=document.querySelector(".home"); var imgs = document.querySelectorAll("#wrap > .inner > img"); var flag=true; var c = 140; /*第二部分：点击变大*/ function fn() { this.style.transition="0.5s"; this.style.transform="rotate(-720deg) scale(1)"; this.style.opacity=1; this.removeEventListener("transitionend",fn); } for (var i=0;i<imgs.length;i++){ imgs[i].onclick=function () { this.style.transition="0.5s "; this.style.transform="rotate(-720deg) scale(2)"; this.style.opacity=0.1; this.addEventListener("transitionend",fn); } } /*第一部分：布局*/ homeEle.onclick=function () { if(flag){ this.style.transform="rotate(-720deg)"; for (var i=0;i<imgs.length;i++){ imgs[i].style.transition="1s "+(i*0.1)+"s"; imgs[i].style.transform= "rotate(-720deg) scale(1)"; 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-i-1)*0.1)+"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> </html>可能遇到的问题 1、消除滚动条
html{ height: 100%; overflow: hidden; }如果html标签继承了初始包含块的高度100%，并且overflow为hidden，则浏览器的滚动条就会消去。
2、计算导航图标的位置
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}; }c为导航图标到home图标的直线距离，即扇形‘半径’，运用公式 1弧度=180/pai 度 Math.sin函数需要添加弧度计算，所以需要一个换算步骤。
3、弹出与收回的优化
弹出时，第一个图标i=0到i=4依次弹出 imgs[i].style.transition="1s "+(i*0.1)+"s"; 收回时，则会从4-1收回 imgs[i].style.transition="1s "+((imgs.length-i-1)*0.1)+"s";4、选择导航后，收回没有旋转效果
/*自杀函数,也会随之消掉transform属性，所以每次都需要带上原来的状态，这就是为什么要加rotate和scale声明了*/ function fn() { this.style.transition="0.5s"; this.style.transform="rotate(-720deg) scale(1)"; this.style.opacity=1; this.removeEventListener("transitionend",fn); }ps：图标我用的是50*50像素的，移动端一定得加上下面这行代码
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> 我又手敲了一遍以加深记忆