圆形码头/菜单在css或jquery

Question

是否可以使用css或jquery进行循环菜单或停靠。？
我有一组图像作为码头项目需要显示为圆形码头...但是码头中的项目数量不是常数，可能会有所不同....所以我不能倾向于使用常量值进行定位每个项目以预定义的方式。 Ajax将一些图像加载到这个特定的div中，我需要使用css或jquery来设置它的样式，以便它们显示为圆形停靠项。关于如何实施这一点的任何想法..？
我想要一个浏览器特定的实现，但我也欢迎，如果有人有一些特定于少数浏览器的解决方案......

更新
我不认为我确实想要一个馅饼菜单...随着停靠项目数量的增加，它很容易搞砸。我正在寻找一个螺旋码头。 通过螺旋我的意思是菜单项必须在以下对齐..

Answer 1

我觉得我明白了！这只是一个基本概念，所以请自己调整一下。

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

请参阅以下JSFiddle和以下代码：

var items = 10;
var a = 20;
var b = 1; // updated an extra b, used for rate (see update section below)
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

用于测试目的的一些CSS：

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

更新：回复评论

yPos和xPos的功能是向外部生成项目，它们从中心点开始。通过在a内定义不同的var b和额外的Math.cos(b*i)。可以改变显示的div的速率和总螺旋的扩展。螺旋的扩散由a定义，因为它定义了振幅。 div显示的速率由新b定义。

因此较小的b意味着较低的角度，意味着在螺旋上更靠近。 较小的a表示较低的幅度，意味着在x和y轴上更靠近。

如果图像数量不可预测，那就不应该了，因为螺旋线会熄灭。当然，这会在添加太多时给你带来问题。

另一个解决方案是在PHP中执行此操作，因为它没有动态可执行操作，因此您可以在后端执行此操作。可能与forloop和all一样，但随后在PHP中打印语句。

Answer 2

虽然您指定不想要饼图菜单，但也许可以使用my code（或原始链接之一）。计算项目的位置，因此无需担心添加/删除。

Answer 3

这可能是有意义的吗？ http://www.wizzud.com/jqDock/

Answer 4

我相信你可以使用像http://snipplr.com/view/43352/jquery-plugin-spiral-animations/

这样的东西

尝试用简单的.css替换插件中的animate函数（{'margin-left'：x，'margin-top'：y}）

数学运算已经存在，您只需要将动画转换为静态位置（为菜单中的每个项目赋予不同的偏移量）

对不起，我没有时间写一些代码，这比解释更容易：D