div 环形排列

javascript-按圆形排列DIV元素(一)---- 分析

效果图：

 

一、分析图：

绿色边框内：外层的DIV元素,相对定位;

白色圆形框：辅助分析的想象形状;

白点：为白色圆形的圆心点，中心点，点o;

圆心角：角NOG;

黄色：需要按圆形排列的，绝对定位的DIV元素;

红色点：为每个黄色DIV的坐标点;即绝对定位时的元素，left值 和 top值 ，设置的点;

 

 

 

二、涉及到的概念定义：

2.1、弧度：弧度是角的度量单位。

（红色部分为弧长，角A为弧长对应的圆心角）

弧长等于半径的弧，其所对的圆心角为1弧度。(即两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角的弧度为1)。

根据定义，一周的弧度数为2πr/r=2π，360°角=2π弧度，因此，1弧度约为57.3°，即57°17'44.806''，1°为π/180弧度，近似值为0.01745弧度，周角为2π弧度，平角（即180°角）为π弧度，直角为π/2弧度。

弧长=n2πr/360