技术笔记

弧度菜单说明

demo地址 ：https://github.com/liu-bluesky/-menu_arc.gitopen in new window

  • $("#navs") 外曾大盒子
  • $("#navs li") 菜单显示盒子 ==求x、y轴公式==
 x1(x轴坐标) = x0 +半径 * cos(角度 * PI / 180) 
 y1（x轴坐标） = y0 + 半径 * sin(角度 * PI /180)
1
2
(function(){
	var ul=$("#navs"),li=$("#navs li"),i=li.length,n=i-1,r=300;
	ul.click(function(){
		$(this).toggleClass('active');

		if($(this).hasClass('active')){
			for(var a=0;a<i;a++){
				li.eq(a).css({
					'transition-delay':""+(50*a)+"ms",
					'-webkit-transition-delay':""+(50*a)+"ms",
					'-o-transition-delay':""+(50*a)+"ms",
					'transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",
					// '-webkit-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",
					// '-o-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px",
					// '-ms-transform':"translate("+(r*Math.cos(90/n*a*(Math.PI/180)))+"px,"+(-r*Math.sin(90/n*a*(Math.PI/180)))+"px"
				});
			}
		}else{
			li.removeAttr('style');
		}
	});
})($);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

代码解析关键内容xy

Math.cos求的是x轴
(r*Math.cos(90/n*a*(Math.PI/180)))
n :表示分了几份 这里就是把90度角份了 n份 即x轴坐标分了n个坐标点
Math.sin求的是y
(-r*Math.sin(90/n*a*(Math.PI/180)))
n :表示分了几份 这里就是把90度角份了 n份 即y轴坐标分了n个坐标点
y是负数 图像就在中心的右上
y是正数，图像就在右下
具体原因自己看 translate 原理
1
2
3
4
5
6
7
8
9

如何控制其实方向

    顺时针
    y = Math.sin(a)
    x = Math.cos(a)
    逆时针
    x = Math.sin(a)
    y = Math.cos(a)
1
2
3
4
5
6