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