使用JavaScript在圆中定位div

我试图将15个div元素均匀地放置在一个半径为150px的圆中。我正在使用下面的代码，它似乎给出了一个奇怪的偏心椭圆重叠

//保留对divmain元素的全局引用。最初分配它。。。有用的地方： var main=document.getElementById'main'； var circleArray=[]； //根据接近鼠标的距离移动一个圆 var moveCircle=函数圆，dx，dy{ }; //查看所有的圆元素，并确定其中是否有任何元素必须移动。 var checkMove=函数{ }; var设置=功能{ 对于变量i=0；i<15；i++{ //创建元素，将其添加到数组中，并以三角方式指定其坐标。 //然后将其添加到主div var circle=document.createElement'div'； circle.className='圆圈编号'+i； 圆形。推圆； circleArray[i].posx=Math.round150*Math.cosi*2*Math.PI/15+'px'； circleArray[i].posy=Math.round150*Math.sini*2*Math.PI/15+'px'； circleArray[i].style.position=相对； circleArray[i].style.top=circleArray[i].posy； circleArray[i].style.left=circleArray[i].posx； main.appendChildcircleArray[i]； } }; 设置； window.addEventListener'load'，函数{ }; div{ 框大小：边框框； } 迪夫曼{ 位置：绝对位置； 左：50%； 最高：50%； } 分区圆{ 位置：绝对位置； 宽度：20px； 高度：20px； 边框：2件纯黑； 边界半径：10px； -webkit边界半径：10px； -moz边界半径：10px； } 将位置设置为绝对。这将允许top和left从0、0定位div。使用relative将从通常布置的位置定位div

将圆的中心点从0,0更改为其他值，如250250

circleArray[i].posx = 250 + Math.round((150*Math.cos(i*(2*Math.PI/15)))) + 'px';
circleArray[i].posy = 250 + Math.round((150*Math.sin(i*(2*Math.PI/15)))) + 'px';
circleArray[i].style.position = "absolute";

---

首先，圆上坐标的方程式简单如下：

(x, y) = (r * cos(θ), r * sin(θ))

式中，r是圆的半径，θ是以弧度表示的角度

您的代码创建偏心椭圆的原因是，当您指定.top和.left CSS值时，您没有考虑到它实际上将以左上角作为其引用。我已经修复了你的代码，现在它创建了一个完美的循环

对代码所做的更改： 添加了一个包含所有角度的数组θ

var theta = [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2, 2 * (Math.PI / 3), 3 * (Math.PI / 4), 5 * (Math.PI / 6), Math.PI, 7 * (Math.PI / 6), 5 * (Math.PI / 4), 4 * (Math.PI / 3), 3 * (Math.PI / 2), 5 * (Math.PI / 3), 7 * (Math.PI / 4), 11 * (Math.PI / 6)];

下图显示了我使用的所有角度

添加了一个包含不同颜色的数组颜色

var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'DarkSlateBlue'];

对三角方程进行了更改

circleArray[i].posx = Math.round(radius * (Math.cos(theta[i]))) + 'px';
circleArray[i].posy = Math.round(radius * (Math.sin(theta[i]))) + 'px';

改变了分配“顶部”和“左侧”的方式

circleArray[i].style.top = ((mainHeight / 2) - parseInt(circleArray[i].posy.slice(0, -2))) + 'px';
circleArray[i].style.left = ((mainHeight / 2) + parseInt(circleArray[i].posx.slice(0, -2))) + 'px';

其中mainHeight是主分区的高度

[1] 16个分区 演示 var设置=功能{ var半径=150； var main=document.getElementById'main'； var mainHeight=parseIntwindow.getComputedStylemain.height.0，-2； var theta=[0，Math.PI/6，Math.PI/4，Math.PI/3，Math.PI/2，2*Math.PI/3，3*Math.PI/4，5*Math.PI/6，Math.PI，7*Math.PI/6，5*Math.PI/4，4*Math.PI/3，3*Math.PI/2，5*Math.PI/3，7*Math.PI/4，11*Math.PI/6]； var circleArray=[]； 变量颜色=[“红色”、“绿色”、“紫色”、“黑色”、“橙色”、“黄色”、“栗色”、“灰色”、“浅蓝色”、“番茄色”、“粉色”、“栗色”、“青色”、“洋红”、“蓝色”、“巧克力色”、“深蓝色”]； 对于变量i=0；i<16；i++{ var circle=document.createElement'div'； circle.className='圆圈编号'+i； 圆形。推圆； circleArray[i].posx=Math.roundradius*Math.costheta[i]+'px'； circleArray[i].posy=Math.roundradius*Math.sintheta[i]+'px'； circleArray[i].style.position=绝对值； circleArray[i].style.backgroundColor=colors[i]； circleArray[i].style.top=mainHeight/2-parseIntcircleArray[i].posy.slice0，-2+'px'； circleArray[i].style.left=mainHeight/2+parseIntcircleArray[i].posx.slice0，-2+'px'； main.appendChildcircleArray[i]； } }; 设置； 迪夫曼{ 高度：300px； 宽度：300px； 位置：绝对位置； 保证金：0自动； 转化：转化-50%，-50%； 最高：50%； 左：50%； } 分区圆{ 位置：绝对位置； 宽度：20px； 高度：20px； 边框：2件纯黑； 边界半径：50%； } 身体{ 保证金：0自动； 背景：番木瓜； } 没有JS的其他方法 chipChocolate.py的anser是相当完整的，但是还有一种方法可以实现你的目标。它更简单，不需要JS

重点是考虑圆和旋转，而不是依赖[x，y]坐标：

您需要嵌套所有图元并对其应用旋转。嵌套后，n+1元素将根据其直接父元素的旋转进行旋转。以下是一份：

.circle，.circle div{ 宽度：24px；高度：300px； 位置：绝对位置； 左：50%；顶部：50px； } .circle:before..circle div:before{ 内容：； 显示：块； 宽度：20px；高度：20px； 边框：2件纯黑； 边界半径：100%； } .圆形分区{ 顶部：0；左侧：0； -webkit变换：旋转24deg； -ms转换： 旋转24deg； 变换：旋转24deg； }

---

另一个解决方案，基于我见过的其他解决方案的想法

作用{ 弧度，半径； 半径=150； var totalItems=48 var项=0； 功能定位目标 { 变量x，y，角度=0，步长=2*Math.PI/totalItems； 变量宽度=$‘容器’。宽度/2； 变量高度=$‘容器’。高度/2； var itemW=20，itemH=2； var-deg=0；

---

whileitem请包含相应的HTML.Done。在主HTML div.circleArray上使用getElementById方法可以找到主元素。circleArray也没有定义，但无论如何，我认为我们缺少一些您正在使用的基本CSS，您能提供它吗？也就是说，在您的代码中使用'probmem.CSS'，我想如果您也包含CSS会更好l、 更新为包含css…此外，circleArray在脚本的前面被全局定义为一个空数组，我正在推它。还包括一个指向JSFIDLE的链接，以防我忘记了一些代码，所以每个人都可以看到问题。提前感谢！我希望它们的位置与通常的位置相对，这是问题的中心页面作为主div的子级，因此它们都围绕页面中心旋转，基本上这是非常完整的，谢谢！我对您使用的切片方法感到好奇。我想我误解了它的功能是我认为它与字符串有关更多？这太棒了。另外，+1表示番茄：从未意识到这是w3c颜色：@chipChocolate.py绝对是。我已经更正了。我认为你的帖子太棒了。很抱歉我草率地点击了；@thomas-没关系！谢谢你！：很棒的帖子，信息量非常大！叉形小提琴[5]对于随机圈数和直径，我必须在javascript中对它们进行定位，因为我要编写代码，根据mousemove操作这些位置，并且需要脚本知道它们的位置。好的，我会留下这个答案，以防有人在没有JS的情况下需要相同的东西。对我来说也很好。新的原生CSS功能es可以减少使用复杂javascript的需要，因此，如果可能的话，我更喜欢使用本机而不是javascript。