我正在寻找一个功能来围绕一个圆圈排列一些元素。
结果应该是这样的:
问问题
30115 次
5 回答
81
这里有一些代码可以帮助你:
var numElements = 4,
angle = 0
step = (2*Math.PI) / numElements;
for(var i = 0; i < numElements.length; i++) {
var x = container_width/2 + radius * Math.cos(angle);
var y = container_height/2 + radius * Math.sin(angle);
angle += step;
}
它不完整,但应该给你一个好的开始。
更新:这是真正有效的东西:
var radius = 200; // radius of the circle
var fields = $('.field'),
container = $('#container'),
width = container.width(),
height = container.height(),
angle = 0,
step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2),
y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
演示: http: //jsfiddle.net/ThiefMaster/LPh33/
这是一个改进的版本,您可以在其中更改元素计数。
于 2012-04-14T09:16:39.917 回答
14
对于以 ( x , y ) 为中心、距离为r的元素,该元素的中心应位于:
(x + r cos(2kπ/n), y + r sin(2kπ/n))
其中n是元素的数量,k是您当前定位的元素的“数量”(介于 1 和n之间)。
于 2012-04-14T09:18:42.233 回答
4
我将 ThiefMaster 的小提琴与 jQuery pointAt 插件结合起来:
演示:http: //jsfiddle.net/BananaAcid/nytN6/
the code is somewhat like above.
might be interesting to some of you.
于 2013-07-28T18:36:04.087 回答
1
将元素排列成圆圈(Javascript)
function arrangeElementsInCircle (elements, x, y, r) {
for (var i = 0; i < elements.length; i++) {
elements[i].scaleX = 1 / elements.length
elements[i].scaleY = 1 / elements.length
elements[i].x = (x + r * Math.cos((2 * Math.PI) * i/elements.length))
elements[i].y = (y + r * Math.sin((2 * Math.PI) * i/store.length))
}
}
其中x,y
是点坐标,elements
是要放置的元素数组,r
是半径。
于 2018-06-22T06:44:52.873 回答
0
小偷大师答案的纯Javascript版本
function distributeFields(deg){
deg = deg || 0;
var radius = 200;
var fields = document.querySelectorAll('.field'), //using queryselector instead of $ to select items
container = document.querySelector('#container'),
width = container.offsetWidth, //offsetWidth gives the width of the container
height = container.offsetHeight,
angle = deg || Math.PI * 3.5,
step = (2 * Math.PI) / fields.length;
console.log(width, height)
//using forEach loop on a NodeList instead of a Jquery .each,
//so we can now use "field" as an iterator instead of $(this)
fields.forEach((field)=>{
var x = Math.round(width / 2 + radius * Math.cos(angle) - field.offsetWidth/2);
var y = Math.round(height / 2 + radius * Math.sin(angle) - field.offsetHeight/2);
console.log(x, y)
field.style.left = x + 'px'; //adding inline style to the document (field)
field.style.top= y + 'px';
angle += step;
})
}
distributeFields();
于 2021-01-19T16:32:35.547 回答