基于javascript将DIV元素排列成圆形(一)

渲染：

一、分析图表：

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

白色圆形盒子：辅助分析的想象形态：

白点：白色圆圈的中心点、中心点和o点；

中心角：NOG角；

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

红点：每个黄色DIV的坐标点；即元素、绝对定位中的左值和顶值、设定点；

二.相关概念的定义：

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

(红色部分为弧长，角度A为弧长对应的中心角)

弧长等于半径的弧，其中心角为1弧度。(也就是说，两条射线从圆心发射到圆周，形成一个夹角和一个面向该夹角的弧。当弧长正好等于圆的半径时，两条射线夹角的弧度为1)。

根据定义，一周的弧度数为2r/r=2，360的角度为2弧度。因此，1弧度约为57.3，即57 1744.806，1弧度为/180弧度，近似值为0.01745弧度，圆角为2弧度。

弧长=n2r/360(这里n为角度数，即与中心角n对应的弧长)

========================================================

2.2.正弦值：弦值是直角三角形中对边的长度大于上斜边的长度的值。

要求数学. sin(x) : X。用弧度表示的角度。角度可以通过乘以0.017453293 (2PI/360)转换成弧度。

================================================

2.3.余弦值：是指锐角的相邻边与直角三角形斜边的比值。

要求数学. sin(x) : X。用弧度表示的角度。角度可以通过乘以0.017453293 (2PI/360)转换成弧度。

三.需求分析：

3.1让这些黄色div排列在同一个圆的圆周上

3.2布局均匀

四、原理分析：

为了排列DIV形成一个圆，本质是设置每个DIV的左值和TOP值的关系，使它们之间的值关系可以按照圆的规律来设置；

4.1什么是圆的定律？

是PI()；将任何值乘以这个圆周率，然后乘以2，就可以得到一个圆。这个“任意值”就是得到的圆的半径；值越大，圈当然就越大。

4.2如何找到每个DIV的Left和TOP值之间的关系？

上图中每个黄色DIV左上角的红点坐标是左侧和TOP的值。如果红点只是分布在圆周上，那么左边和顶部一定与这个圆周率相关联。只有PI有圆。

动词（verb的缩写）个案分析

我想得到上图红点的坐标值，也就是DIV的左、TOP值。

左=ng o的横坐标值(左)

TOP=或(顶部)的纵坐标值

因此，首先需要以中心o为顶点，以圆半径为斜边的每个直角三角形的两个直角的值。(上图蓝色直角三角形的ON和NG段的长度值)

在半圆方面，当中心角变大，半径不变时，这个底边的值会变大；

正弦公式：sin(X)=对边/斜边X变大，斜边不变(半径)，那么对边(上图中ng线段)会变大；

Cos(X)=邻边/斜边X变大，斜边不变(半径)，那么邻边(上图ON线段)会变小；

270度的正统值为负1；

180的余弦为负1；

5.1先设置一个圆

半径：200px

5.2平均这个圆的周长

假设我们在这个半径为200PX的圆上均匀分布了八个凹坑。那么这里我们通过角度来平均(弧的划分，平均值，风险要通过角度来划分)；

平均值：圆的中心角的总角度为360度，平均8个部分，为360/8；这样，每个中心角、弧长和弧度都相等。

5.3求出ng的leNGth值，即DIV的左值，即红点的横坐标值；

为了找到这个值，使用正弦函数；

公式Math.sin(X)=对边/斜边；

我们需要知道x，我们需要知道斜边；可以找到“对侧”值，即ng的leNGth值；

5.3.1这里的X是弧度，也就是角度的个数；如上定义，弧度数代表角度数；

根据公式：角度数乘以PI/180就是弧度数；X=(360/8)* PI/180

这个计算出的x是圆等分后的弧度数；

5.3.2斜边是这个圆的半径，是200；

5.3.3“相反侧”值，即ng的leNGth值；

根据上式：对边(NG)=数学sin(X)*斜边

即对侧(ng)=math . sin(x)* 200=math . sin((360/8)* pi/180)* 200；

好了，现在求对面的值(NG)；那就是红点的横坐标值，也就是DVI的LEFT值；

5.4求每个中心角对应的直角边，即对边的长度值

因为每个圆心角都是等分的，所以乘以倍数就可以得到不完美圆心角对应的弧度值，也就是角度值

这里用DIV的指数作为倍数，取值乘以x，得到每次除法后各圆心角的弧度值；

对面=Math.sin(X*指数)* 200；

使用这个[对面]值作为DIV的左边值；

5.5 DIV的顶值，即ON线段的长度值

利用上述四点的原理，只有正弦值被改变为余弦值

相邻边(开)=数学。COS(X*指数)* 200；

将该值设置为DIV的TOP值；

根据上面的分析：代码如下，可以按照一个圆来排列DIV

//半径var半径=200；//每个BOX对应的角度；var avd=360/$('。方框')。长度；//每个BOX对应的弧度；var ahd=avd *数学。PI/180；$('.方框')。每个(函数(索引，元素){ $(this))。CSS({ ' left ' : ath . sin((ahd * index))* radius，' top ' : ath . cos((ahd * index))* radius })；});5.6设置这个圆的位置

圆的位置是根据圆心的坐标来确定的，所以我们只要设置圆心的坐标，左上

如果圆心的坐标改变，那么对应DIV的左上角也应该改变；

例如，在圆心处留下：100PXTOP:100px；

那么每个DIV的左边和顶部也应该加上这个值：

代码如下

$(function(){ //横坐标vardotleft=($(')。容器')。width ()-$('。点')。width())/2；//中心点纵坐标vardottop=($(')。容器')。height ()-$('。点')。高度())/2；//起始角度var star=0；//半径var半径=200；//每个BOX对应的角度；var avd=360/$('。方框')。长度；//每个BOX对应的弧度；var ahd=avd *数学。PI/180；//设置圆$('的中心点位置。点')。CSS({ ' left ' : dottleft，' top ' : dottop })；$('.方框')。每个(函数(索引，元素){ $(this))。CSS({ ' left ' : ath . sin((ahd * index))* radius DotLeft，' top ' : ath . cos((ahd * index))* radius DotOp })；});})六个总结：

6.1当涉及到曲线或圆弧时，我们应该用角度或弧度来分析和寻找相关性；

6.2找到关系或比例，使值与值为关系表达式，将相乘或除以倍数；(比如之前写的放大镜是成比例的)；

七以前的理解是错误的，现在更新了分析图片和分析；感谢“弦”！小贴士~

以上就是本文的全部内容，希望对大家有所帮助。感兴趣的朋友可以看看《基于javascript实现按圆形排列DIV元素(二)》和《基于javascript实现按圆形排列DIV元素(三)》。感谢大家的支持！