最终效果：

在径向菜单的制作前，首先需要知道几点知识点：

Math.sin(x) x的正玄值。返回值在-1.0 到1.0 之间；

Math.cos(x) x的余弦值。返回的是-1.0 到1.0 之间的数；

这两个函数中的X都是指的"弧度"而非"角度",弧度的计算公式为：2*PI/360*角度，使用射流研究…表示是这样的：数学PI/180*度数(1度=180/数学)

如：30 角度的弧度=2*PI/360*30

如何计算圆上任何点坐标（用于计算出子菜单相对于圆的位置)

以父容器左上角为圆点，建立坐标系

代码如下：

！DOCTYPE html html lang=' zh-cn '标题径向菜单的制作/title meta charset=' utf-8 '/meta name=' keywords ' content=' '/meta name=' description ' content=' '/script type=' text/JavaScript ' src=' http : jquery。js '/脚本！-此处需引入jquery文件-style type=' text/CSS ' * { margin : 0；padd : 0；}车身{底色： # 292 a 38字体系列： '微软雅黑；} h1 { margin-top : 20px；文本对齐：中心；color: # fff}。导航包装{位置：相对；宽度： 200像素；高度： 200像素；余量： 50px自动；border: 2px虚线# 4e5061边界半径： 50%;}.navWrap .主导航{位置：绝对值；左侧： 50%;前：名50%；transform: translate(-50%，-50%)；/*分别向左上移动元素对象的50%,保证居中*/宽度： 40px高度： 40px线高： 40pxfont-size : 12px文本对齐：中心；文本装饰：无；color : # fffborder-radius : 3px；文本-阴影： 1px 1px 0px # 000背景# 15a5f3cursor:指针；} .navWrap导航{position:绝对值；宽度： 100%;高度： 100%;变压器：刻度(0);过渡：所有0.5s缓解；opa城市3360 0；} .Navwrap。活动导航{转换：比例尺(1);opa城市3360 1；}.navWrap导航a{position:绝对值；宽度： 30px高度： 30px背景技术# f44283文本对齐：中心；线高： 30px文本装饰：无；color : # fffborder-radius : 3px；文本-阴影： 1px 1px 0px # 000transform: translate(-50%，-50%)；}/样式/头体一径向动画菜单效果演示/h1 div class=' Nawrap ' nava 1/aa2/aa3/aa4/aa5/aa6/aa7/aa8/a/nava class=' main-nav '点我/a/div脚本类型=' text/JavaScript ' $(文档)。ready(function(){ var的位置=false//防止重复初始化子菜单位置$('.navWrap ').打开('点击','。main-nav '，函数(事件){ event。prevent default()；var me=$(this)；var navWrap=me.closest(' .navWrap’)；var nav=Navwrap。find(' nav a ')；if(！navWrap.hasClass('active ')！位于){//Y=R Rsin//X=rrcosvar R=nav wrap。width()/2；var startAngle=0，endAngle=360//可以通过改变角度，做出各种各样的径向菜单//子菜单的夹角var total=nav . length var gap=(endAngle-startAngle)/total；//角度-弧度弧度=数学。PI/180；/**计算并确定各个子菜单的最终位置*/$.每个（导航、功能（索引、el) {//当前子菜单与x轴正向的夹角 (角度-弧度)var my angle=(startAngle gap * index)*弧度；//var x=r r*Math.cos(myAngle)，//myAngle为弧度y=r * r *数学。罪恶(我的角度)；//设置当前子菜单的位置（左，上)=(x，y)$(这个)。css({left: x 'px '，top :y ' px ' })；});isLocated=true} navwrap。toggle class(' active ')；});})/脚本/正文/html以上所述就是本文的全部内容了，希望大家能够喜欢。