1.三角函数sin、cos、对边x轴、邻边y轴计算原理
web前端扇形导航优化：增加addEventListener(“transitionend“,function)事件监听，销毁scale缩放、opacity透明度效果 2.less实现
* {
margin: 0;
padding: 0;
body {
height: 100%;
overflow: hidden;
#wrap {
width: 300px;
height: 300px;
background: seagreen;
color: white;
font: 50px/300px "微软雅黑";
text-align: center;
border-radius: 50%;
top: 25%;
left: 25%;
margin: auto;
position: absolute;
transition: 2s;
}
&:hover #wrap {
background: skyblue;
}
#sector-nav {
width: 50px;
height: 50px;
//fixed：固定位置，默认left/top right/bottom:auto，生效需要指定值为0
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
.sector-nav-home {
//一旦定位position：absolute绝对定位，那么宽高依赖内容，将被内容撑开
position: absolute;
border-radius: 50%;
z-index: 1; //最顶层
//position后，需要定义宽高
height: 100%;
width: 100%;
background: url(../img/home.png) no-repeat;
transition: 2s;
}
.sector-nav-inner {
height: 100%;
img {
position: absolute;
border-radius: 50%;
//居中，图片为42*42px，上下左右各空4个位置
margin: 4px;
//设置每个tag默认位置，这里为null，首次点击不会出现的过渡的bug
left: 0;
top: 0;
}
}
}
}
}
3.css压缩
* {
margin: 0;
padding: 0;
}
* body {
height: 100%;
overflow: hidden;
}
* body #wrap {
width: 300px;
height: 300px;
background: seagreen;
color: white;
font: 50px/300px "微软雅黑";
text-align: center;
border-radius: 50%;
top: 25%;
left: 25%;
margin: auto;
position: absolute;
transition: 2s;
}
* body:hover #wrap {
background: skyblue;
}
* body #sector-nav {
width: 50px;
height: 50px;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
* body #sector-nav .sector-nav-home {
position: absolute;
border-radius: 50%;
z-index: 1;
height: 100%;
width: 100%;
background: url(../img/home.png) no-repeat;
transition: 2s;
}
* body #sector-nav .sector-nav-inner {
height: 100%;
}
* body #sector-nav .sector-nav-inner img {
position: absolute;
border-radius: 50%;
margin: 4px;
left: 0;
top: 0;
}
4.html映射
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扇形导航增强版</title>
</head>
<body>
<div id="wrap">cevent</div>
<div id="sector-nav">
<div class="sector-nav-home">
</div>
<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>
</body>
<link rel="stylesheet" href="css/sector-navigate-pro.css" />
<script type="text/javascript" src="js/sector-navigate-pro.js"></script>
</html>
5.效果图
web前端扇形导航优化：增加addEventListener(“transitionend“,function)事件监听，销毁scale缩放、opacity透明度效果 
