web前端：扇形导航，三角函数sinθ对边x轴，cosθ邻边y轴计算原生实现

1.三角函数原理分析

2.less定义布局

* {
    margin: 0;
    padding: 0;
    //找子选择器css：#id > .class {}
    body {
        //取消滚动条显示
        height: 100%;
        overflow: hidden;
        #sector-navigate {
            width: 300px;
            height: 300px;
            font: 50px/300px "微软雅黑";
            text-align: center;
            color: white;
            background: salmon;
            border-radius: 50%;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition: 2s;
        }
        &:hover #sector-navigate {
            background: skyblue;
        }
        //扇形导航
        #sector-nav {
            width: 50px;
            height: 50px;
            //fixed：固定位置，默认left/top right/bottom:auto，生效需要指定值为0
            position: fixed;
            right: 20%;
            bottom: 20%;
            .sector-nav-home {
                //一旦定位position：absolute绝对定位，那么宽高依赖内容，将被内容撑开
                position: absolute;
                left: 0;
                top: 0;
                //图层显示
                z-index: 1;
                //position后，需要定义宽高
                height: 100%;
                width: 100%;
                background: url(../img/home.png) no-repeat;
                border-radius: 50%;
                transition: 2s;
            }
            /**
               home
               -->line分割距离：width=140px
               -->0°-90°：5个tag，分割4个角度，每个22.5°
               --》每个tag，坐标
             */
            .sector-nav-inner {
                height: 100%;
                img {
                    //absolute：绝对定位，所有img重叠一个位置,和fixed定位一样，需要申明position
                    position: absolute;
                    top: 0;
                    left: 0;
                    //居中，图片为42*42px，上下左右各空4个位置
                    margin: 4px;
                    border-radius: 50%;
                    //每个tag出现duration不同，这里不可指定transition
                    //transition: 1s;
                }
            }
        }
    }
}

3.css原生

* {
  margin: 0;
  padding: 0;
}
* body {
  height: 100%;
  overflow: hidden;
}
* body #sector-navigate {
  width: 300px;
  height: 300px;
  font: 50px/300px "微软雅黑";
  text-align: center;
  color: white;
  background: salmon;
  border-radius: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 2s;
}
* body:hover #sector-navigate {
  background: skyblue;
}
* body #sector-nav {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20%;
  bottom: 20%;

}
* body #sector-nav .sector-nav-home {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: url(../img/home.png) no-repeat;
  border-radius: 50%;
  transition: 2s;
}
* body #sector-nav .sector-nav-inner {
  height: 100%;
}
* body #sector-nav .sector-nav-inner img {
  position: absolute;
  top: 0;
  left: 0;
  margin: 4px;
  border-radius: 50%;
}

4.js原生实现元素捕捉

//不发起window.onload加载，有可能获取不到元素（js速度快，有可能没有在页面加载完就获取元素）
window.onload=function(){
	var homeNode=document.querySelector(".sector-nav-home");
	var imgs=document.querySelectorAll("#sector-nav > .sector-nav-inner > img");
	var flag=true;
	var c=140;//斜边距离
	//点击事件
	homeNode.onclick=function(){
		//进入顺时针转动
		if(flag){
			console.log("旋转！");
			/**
			 * 1.transition：在元素首次进入渲染没有完成时，不会触发过渡
			 * 2.transform:在大部分切换css样式中，如果变换函数的 TODO 位置、TODO 个数 不同，也不会触发过渡
			 */
			this.style.transform="rotate(-1000deg)";
			//.sector-nav-inner无定位，参照#sector-nav的fixed定位
			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],deg=90/(imgs.length-1)*i,获取每个img的读书
				//在容器#sector-nav中：正值在下方出现，需要改为负值
				imgs[i].style.left=-getPoint(c,90/(imgs.length-1)*i).left+"px";
				imgs[i].style.top=-getPoint(c,90/(imgs.length-1)*i).top+"px";
			}
		}else{//关闭逆时针转动
			this.style.transform="rotate(0deg)";
			for(var i=0;i<imgs.length;i++){
				//最后一个定位的坐标先消失(imgs.length-1-i)
				imgs[i].style.transition="1s "+((imgs.length-i)*0.15)+"s";
				imgs[i].style.transform="rotate(720deg)";
				imgs[i].style.left=0+"px";
				imgs[i].style.top=0+"px";
			}
		}
		//执行完毕，反转还原flag，切换效果可使用
		flag=!flag;
	}
	
	/**
	 * 已知：斜边和角度
	 * cosθ=邻边（y轴）/斜边  cos22.5°=y轴/140  y坐标=cos22.5°*140=
       sinθ=对边（x轴）/斜边   sin22.5°=x轴/140  x坐标=sin22.5°*140=
       cos22.5°=-0.8733046400935156
       sin22.5°=-0.4871745124605095
	         角度转弧度：deg*Math.PI*2/360 = deg*Math.PI/180
	   	 */
	function getPoint(c,deg){
		//sinθ=对边（x轴）
		//不取小数，使用Math.round()
		var x=Math.round(c*Math.sin(deg*Math.PI/180));
		//cosθ=临边（y轴）
		var y=Math.round(c*Math.cos(deg*Math.PI/180));
		//{属性名：变量值，属性名：变量值} left=x轴坐标 top=y轴坐标
		return {left:x,top:y};
	}
}

5.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>扇形导航sector navigate transition</title>
	</head>
	<body>
		<h1>sector-navigate</h1>
		<div id="sector-navigate">
			扇区
		</div>
		<div id="sector-nav">
			<div class="sector-nav-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="sector-nav-home">
			</div>
		</div>
	</body>
	<link rel="stylesheet" href="css/sector-navigate.css" />
	<script type="text/javascript" src="js/sector-navigate.js"></script>
</html>

6.效果图