围绕圆圈动态排列一些元素 [英] Dynamically arrange some elements around a circle
本文介绍了围绕圆圈动态排列一些元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一个函数来围绕一个圆圈排列一些元素。
结果应该是这样的:
I'm looking for a function to arrange some elements around a circle.
result should be something like :
推荐答案
这里有一些代码可以帮助你:
Here's some code that should help you:
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;
}
这不完整,但应该给你一个良好的开端。
It is not complete but should give you a good start.
更新:这是实际有用的东西:
Update: Here's something that actually works:
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/
这是一个改进版本您可以在其中更改元素数。
Demo: http://jsfiddle.net/ThiefMaster/LPh33/
Here's an improved version where you can change the element count.
这篇关于围绕圆圈动态排列一些元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文