弧度菜单说明
demo地址 :https://github.com/liu-bluesky/-menu_arc.git
- $("#navs") 外曾大盒子
- $("#navs li") 菜单显示盒子
求x、y轴公式
x1(x轴坐标) = x0 +半径 * cos(角度 * PI / 180)
y1(x轴坐标) = y0 + 半径 * sin(角度 * PI /180)
(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');
}
});
})($);
代码解析关键内容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 原理
如何控制其实方向
顺时针
y = Math.sin(a)
x = Math.cos(a)
逆时针
x = Math.sin(a)
y = Math.cos(a)