![pink]( "pink")
本文介绍了使用JavaScript将div定位在一个圆中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我试图将15个 div 元素均匀地放置在半径 150px 的圆圈中。我使用下面的代码，似乎给一个奇怪的偏心椭圆重叠。 var setup = function（）{var radius = 150; var main = document.getElementById（'main'）; var mainHeight = parseInt（window.getComputedStyle（main）.height.slice（0，-2））; [数学PI / 3]，Math.PI / 2，（Math.PI / 3），3 *（Math.PI / 4）， 5 *（Math.PI / 6），Math.PI，7 *（Math.PI / 6），5 *（Math.PI / 4），4 * / 2），5 *（Math.PI / 3），7 *（Math.PI / 4），11 *（Math.PI / 6） var circleArray = []; var colors = ['red'，'green'，'purple'，'black'，'orange'，'yellow'，'maroon'，'grey'，'lightblue'，'tomato'，'pink'，'maroon '，'cyan'，'magenta'，'blue'，'chocolate'，'DarkSlateBlue']; for（var i = 0; i div＃main {height ：300px; width：300px; position：absolute; margin：0 auto; transform：translate（-50％，-50％）; top：50％; left：50％;} div.circle {position：absolute; width：20px; height：20px; border：2px solid black; border-radius：50％;} body {margin：0 auto; background：papayawhip;} < div id =main >< / div> b $ b [2] 15 div s平均排列 演示小提琴 var setup = function（）{var radius = 150; var main = document.getElementById（'main'）; var mainHeight = parseInt（window.getComputedStyle（main）.height.slice（0，-2））; （2 *（Math.PI / 5）），（8 *（Math.PI / 15）），（2 * 15）），（2 *（Math.PI / 3）），（4 *（Math.PI / 5） ），（22 *（Math.PI / 5）），（8 *（Math.PI / 5）），（4 * （26 *（Math.PI / 15）），（28 *（Math.PI / 15））]; var circleArray = []; var colors = ['red'，'green'，'purple'，'black'，'orange'，'yellow'，'maroon'，'grey'，'lightblue'，'tomato'，'pink'，'maroon '，'cyan'，'magenta'，'blue'，'chocolate'，'DarkSlateBlue']; for（var i = 0; i div＃main {height ：300px; width：300px; position：absolute; margin：0 auto; transform：translate（-50％，-50％）; top：50％; left：50％;} div.circle {position：absolute; width：20px; height：20px; border：2px solid black; border-radius：50％;} body {margin：0 auto; background：papayawhip;} < div id =main >< / div> b $ b [3]更好 - 24 div s http://jsfiddle.net/t9x4n04f/1/rel =nofollow noreferrer>小提琴 var setup = function（）{var radius = 150; var main = document.getElementById（'main'）; var mainHeight = parseInt（window.getComputedStyle（main）.height.slice（0，-2））; [数学式11] Math = PI / 6，Math.PI / 4，Math.PI / 3,5×（Math.PI / 12），Math.PI / （数学PI / 12），2 *（数学PI / 3），3 *（数学PI / 4），5 *（数学PI / 6） 13 *（Math.PI / 12），7 *（Math.PI / 6），5 *（Math.PI / 4），4 * 3 *（Math.PI / 2），19 *（Math.PI / 12），5 *（Math.PI / 3），7 * 23 *（Math.PI / 12）]; var circleArray = []; var colors = ['red'，'green'，'purple'，'black'，'orange'，'yellow'，'maroon'，'grey'，'lightblue'，'tomato'，'pink'，'maroon '，'cyan'，'magenta'，'blue'，'chocolate'，'darkslateblue'，'coral'，'blueviolet'，'burlyn'，'cornflowerblue'，'crimson'，'darkgoldenrod'，'olive' '赭色']; for（var i = 0; i div＃main {height ：300px; width：300px; position：absolute; margin：0 auto; transform：translate（-50％，-50％）; top：50％; left：50％;} div.circle {position：absolute; width：20px; height：20px; border：2px solid black; border-radius：50％;} body {margin：0 auto; background：papayawhip;} < div id =main >< / div> b $ b [4]并且它不断变得更好 - 动态定位任何数量的 div s 演示小提琴 此功能 generate（n，r，id）有三个参数： n - / code> s， r - radius和 id - main 在我们的例子中。 = []; var setup = function（n，r，id）{var main = document.getElementById（id）; var mainHeight = parseInt（window.getComputedStyle（main）.height.slice（0，-2））; var circleArray = []; var colors = ['red'，'green'，'purple'，'black'，'orange'，'yellow'，'maroon'，'grey'，'lightblue'，'tomato'，'pink'，'maroon '，'cyan'，'magenta'，'blue'，'chocolate'，'darkslateblue'，'coral'，'blueviolet'，'burlyn'，'cornflowerblue'，'crimson'，'darkgoldenrod'，'olive' 'sienna'，'red'，'green'，'purple'，'black'，'orange'，'yellow'，'maroon'，'grey'，'lightblue'，'tomato'，'pink'，'maroon '，'cyan'，'magenta'，'blue'，'chocolate'，'darkslateblue'，'coral'，'blueviolet'，'burlyn'，'cornflowerblue'，'crimson'，'darkgoldenrod'，'olive' '赭色']; for（var i = 0; i div＃main {height：300px; width：300px; position：absolute; margin：0 auto; transform：translate（-50％，-50％）; top：50％; left：50％;} div.circle {position：absolute; width：20px; height：20px; border：2px solid black; border-radius：50％;} body {margin：0 auto; background：papayawhip;} < div id =main >< / div> b $ b [5]动态定位椭圆上 div 的任何数量 椭圆上的坐标是： （x，y）=（r sub x cos ），r y * sin（θ）） 其中， r x 是沿X轴的半径， r y 是沿Y轴的半径 在这种情况下，函数 generate（n，rx，ry，id）有四个参数， n 是 div s， rx 和 ry 分别是沿X轴和Y轴的半径，最后 id 是要添加您的椭圆排列的 div 的 id div 。 演示了 Fiddle ; var setup = function（n，rx，ry，id）{var main = document.getElementById（id）; var mainHeight = parseInt（window.getComputedStyle（main）.height.slice（0，-2））; var circleArray = []; var colors = ['red'，'green'，'purple'，'black'，'orange'，'yellow'，'maroon'，'grey'，'lightblue'，'tomato'，'pink'，'maroon '，'cyan'，'magenta'，'blue'，'chocolate'，'darkslateblue'，'coral'，'blueviolet'，'burlyn'，'cornflowerblue'，'crimson'，'darkgoldenrod'，'olive' 'sienna'，'red'，'green'，'purple'，'black'，'orange'，'yellow'，'maroon'，'grey'，'lightblue'，'tomato'，'pink'，'maroon '，'cyan'，'magenta'，'blue'，'chocolate'，'darkslateblue'，'coral'，'blueviolet'，'burlyn'，'cornflowerblue'，'crimson'，'darkgoldenrod'，'olive' '赭色']; for（var i = 0; i div＃main {height：300px; width：300px; position：absolute; margin：0 auto; transform：translate（-50％，-50％）; top：50％; left：50％;} div.circle {position：absolute; width：20px; height：20px; border：2px solid black; border-radius：50％;} body {margin：0 auto; background：papayawhip;} < div id =main >< / div> b $ b 编辑[2015年12月9日]： 这里是一个更灵活的版本，具有开始偏移，时钟和逆时针功能。 @import url（http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300）; body {margin：0 auto; background：rgb（198，193，173）;} I am trying to position 15 div elements evenly in a circle with a radius of 150px. I'm using the following code, which seems to give an oddly eccentric ellipse that overlaps.Fiddle// Hold a global reference to the div#main element. Initially assign it ... somewhere useful :)var main = document.getElementById('main');var circleArray = [];// Move a circle based on the distance of the approaching mousevar moveCircle = function(circle, dx, dy) {};// Look at all the circle elements, and figure out if any of them have to move.var checkMove = function() {};var setup = function() { for (var i = 0; i < 15; i++) { //create element, add it to the array, and assign it's coordinates trigonometrically. //Then add it to the "main" div var circle = document.createElement('div'); circle.className = 'circle number' + i; circleArray.push(circle); circleArray[i].posx = Math.round((150 * Math.cos(i * (2 * Math.PI / 15)))) + 'px'; circleArray[i].posy = Math.round((150 * Math.sin(i * (2 * Math.PI / 15)))) + 'px'; circleArray[i].style.position = "relative"; circleArray[i].style.top = circleArray[i].posy; circleArray[i].style.left = circleArray[i].posx; main.appendChild(circleArray[i]); }};setup();window.addEventListener('load', function() {});div { box-sizing: border-box;}div#main { position: absolute; left: 50%; top: 50%;}div.circle { position: absolute; width: 20px; height: 20px; border: 2px solid black; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;}<div id="main"></div>Any suggestions as to what I might be doing wrong? 解决方案 First of all, the equation for a co-ordinate on a circle is simply: (x, y) = (r * cos(θ), r * sin(θ))where, r is the radius of a circle and θ is the angle in radians.The reason why your code is creating an eccentric ellipse is because when you assign the .top and .left CSS values, you are not considering that it will actually take the top-left corner as its reference. I've fixed your code and now it creates a perfect circle.Changes made to your code:Added an array theta that holds all the angles.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)];The image below shows all the angles I've used.Added an array colors that holds different colors.var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'DarkSlateBlue'];Made changes to your trigonometric equations.circleArray[i].posx = Math.round(radius * (Math.cos(theta[i]))) + 'px';circleArray[i].posy = Math.round(radius * (Math.sin(theta[i]))) + 'px';Changed the way .top and .left are assigned.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';where mainHeight is the height of the #main div.[1] 16 divsDemo on Fiddlevar setup = function() { var radius = 150; var main = document.getElementById('main'); var mainHeight = parseInt(window.getComputedStyle(main).height.slice(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 = []; var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'DarkSlateBlue']; for (var i = 0; i < 16; i++) { var circle = document.createElement('div'); circle.className = 'circle number' + i; circleArray.push(circle); 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.position = "absolute"; circleArray[i].style.backgroundColor = colors[i]; 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'; main.appendChild(circleArray[i]); }};setup();div#main { height: 300px; width: 300px; position: absolute; margin: 0 auto; transform: translate(-50%, -50%); top: 50%; left: 50%;}div.circle { position: absolute; width: 20px; height: 20px; border: 2px solid black; border-radius: 50%;}body { margin: 0 auto; background: papayawhip;}<div id="main"></div>[2] 15 divs Positioned EvenlyDemo on Fiddlevar setup = function() { var radius = 150; var main = document.getElementById('main'); var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2)); var theta = [0, (2 * (Math.PI / 15)), (4 * (Math.PI / 15)), (2 * (Math.PI / 5)), (8 * (Math.PI / 15)), (2 * (Math.PI / 3)), (4 * (Math.PI / 5)), (14 * (Math.PI / 15)), (16 * (Math.PI / 15)), (6 * (Math.PI / 5)), (4 * (Math.PI / 3)), (22 * (Math.PI / 15)), (8 * (Math.PI / 5)), (26 * (Math.PI / 15)), (28 * (Math.PI / 15))]; var circleArray = []; var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'DarkSlateBlue']; for (var i = 0; i < 15; i++) { var circle = document.createElement('div'); circle.className = 'circle number' + i; circleArray.push(circle); 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.position = "absolute"; circleArray[i].style.backgroundColor = colors[i]; 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'; main.appendChild(circleArray[i]); }};setup();div#main { height: 300px; width: 300px; position: absolute; margin: 0 auto; transform: translate(-50%, -50%); top: 50%; left: 50%;}div.circle { position: absolute; width: 20px; height: 20px; border: 2px solid black; border-radius: 50%;}body { margin: 0 auto; background: papayawhip;}<div id="main"></div>[3] Even Better - 24 divsDemo on Fiddlevar setup = function() { var radius = 150; var main = document.getElementById('main'); var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2)); var theta = [0, Math.PI / 12, Math.PI / 6, Math.PI / 4, Math.PI / 3, 5 * (Math.PI / 12), Math.PI / 2, 7 * (Math.PI / 12), 2 * (Math.PI / 3), 3 * (Math.PI / 4), 5 * (Math.PI / 6), 11 * (Math.PI / 12), Math.PI, 13 * (Math.PI / 12), 7 * (Math.PI / 6), 5 * (Math.PI / 4), 4 * (Math.PI / 3), 17 * (Math.PI / 12), 3 * (Math.PI / 2), 19 * (Math.PI / 12), 5 * (Math.PI / 3), 7 * (Math.PI / 4), 11 * (Math.PI / 6), 23 * (Math.PI / 12)]; var circleArray = []; var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna']; for (var i = 0; i <= 23; i++) { var circle = document.createElement('div'); circle.className = 'circle number' + i; circleArray.push(circle); 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.position = "absolute"; circleArray[i].style.backgroundColor = colors[i]; 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'; main.appendChild(circleArray[i]); }};setup();div#main { height: 300px; width: 300px; position: absolute; margin: 0 auto; transform: translate(-50%, -50%); top: 50%; left: 50%;}div.circle { position: absolute; width: 20px; height: 20px; border: 2px solid black; border-radius: 50%;}body { margin: 0 auto; background: papayawhip;}<div id="main"></div>[4] And it keeps getting better - Dynamically Position any number of divs evenlyDemo on FiddleThe function generate(n, r, id) takes three arguments: n - number of divs, r - radius and id - main in our case.var theta = [];var setup = function(n, r, id) { var main = document.getElementById(id); var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2)); var circleArray = []; var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna', 'red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna']; for (var i = 0; i < n; i++) { var circle = document.createElement('div'); circle.className = 'circle number' + i; circleArray.push(circle); circleArray[i].posx = Math.round(r * (Math.cos(theta[i]))) + 'px'; circleArray[i].posy = Math.round(r * (Math.sin(theta[i]))) + 'px'; circleArray[i].style.position = "absolute"; circleArray[i].style.backgroundColor = colors[i]; 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'; main.appendChild(circleArray[i]); }};var generate = function(n, r, id) { var frags = 360 / n; for (var i = 0; i <= n; i++) { theta.push((frags / 180) * i * Math.PI); } setup(n, r, id)}generate(40, 150, 'main');div#main { height: 300px; width: 300px; position: absolute; margin: 0 auto; transform: translate(-50%, -50%); top: 50%; left: 50%;}div.circle { position: absolute; width: 20px; height: 20px; border: 2px solid black; border-radius: 50%;}body { margin: 0 auto; background: papayawhip;}<div id="main"></div>[5] Dynamically Position any number of divs on an EllipseThe equation for a co-ordinate on an ellipse is:(x, y) = (rx * cos(θ), ry * sin(θ))where, rx is the radius along X-axis and ry is the radius along Y-axis.In this case, the function generate(n, rx, ry, id) takes four arguments, where n is the number of divs, rx and ry are the radii along the X and Y-axis respectively and finally id is the id of the div that you want to append your elliptically arranged divs in.Demo on Fiddlevar theta = [];var setup = function(n, rx, ry, id) { var main = document.getElementById(id); var mainHeight = parseInt(window.getComputedStyle(main).height.slice(0, -2)); var circleArray = []; var colors = ['red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna', 'red', 'green', 'purple', 'black', 'orange', 'yellow', 'maroon', 'grey', 'lightblue', 'tomato', 'pink', 'maroon', 'cyan', 'magenta', 'blue', 'chocolate', 'darkslateblue', 'coral', 'blueviolet', 'burlywood', 'cornflowerblue', 'crimson', 'darkgoldenrod', 'olive', 'sienna']; for (var i = 0; i < n; i++) { var circle = document.createElement('div'); circle.className = 'circle number' + i; circleArray.push(circle); circleArray[i].posx = Math.round(rx * (Math.cos(theta[i]))) + 'px'; circleArray[i].posy = Math.round(ry * (Math.sin(theta[i]))) + 'px'; circleArray[i].style.position = "absolute"; circleArray[i].style.backgroundColor = colors[i]; 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'; main.appendChild(circleArray[i]); }};var generate = function(n, rx, ry, id) { var frags = 360 / n; for (var i = 0; i <= n; i++) { theta.push((frags / 180) * i * Math.PI); } setup(n, rx, ry, id)}generate(16, 150, 75, 'main');div#main { height: 300px; width: 300px; position: absolute; margin: 0 auto; transform: translate(-50%, -50%); top: 50%; left: 50%;}div.circle { position: absolute; width: 20px; height: 20px; border: 2px solid black; border-radius: 50%;}body { margin: 0 auto; background: papayawhip;}<div id="main"></div>Edit[9th December 2015]:Here's a more flexible version with start offset, clock wise and anti-clock wise functionality./*Usage: Position.ellipse(n, rx, ry, so, wh, idd, cls, cw);where n = number of divs, rx = radius along X-axis, ry = radius along Y-axis, so = startOffset, wh = width/height of divs, idd = id of main div(ellipse), cls = className of divs; cw = clockwise(true/false)*/var Position = { ellipse: function(n, rx, ry, so, wh, idd, cls, cw) { var m = document.createElement('div'), ss = document.styleSheets; ss[0].insertRule('#' + idd + ' { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 ' + wh + 'px ' + wh / 4 + 'px black; background: rgba(0, 0, 0, 0.2); width: ' + String((rx * 2) + wh) + 'px; height: ' + String((ry * 2) + wh) + 'px; }', 1); ss[0].insertRule('.' + cls + '{ position: absolute; background: black; color: papayawhip; text-align: center; font-family: "Open Sans Condensed", sans-serif; border-radius: 50%; transition: transform 0.2s ease; width: ' + wh + 'px; height: ' + wh + 'px; line-height: ' + wh + 'px;}', 1); ss[0].insertRule('.' + cls + ':hover { transform: scale(1.2); cursor: pointer; background: rgba(0, 0, 0, 0.8); }', 1); m.id = idd; for (var i = 0; i < n; i++) { var c = document.createElement('div'); c.className = cls; c.innerHTML = i + 1; c.style.top = String(ry + -ry * Math.cos((360 / n / 180) * (i + so) * Math.PI)) + 'px'; c.style.left = String(rx + rx * (cw ? Math.sin((360 / n / 180) * (i + so) * Math.PI) : -Math.sin((360 / n / 180) * (i + so) * Math.PI))) + 'px'; m.appendChild(c); } document.body.appendChild(m); }}Position.ellipse(20, 150, 150, 0, 42, 'main', 'circle', true);@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); body { margin: 0 auto; background: rgb(198, 193, 173);} 这篇关于使用JavaScript将div定位在一个圆中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！ 08-20 21:47