如何在css / html / js中排列半圆的元素

Question

我似乎迷失了如何以半圆形式标记短语列表（在附加图像上命名为title1，title2，title3等）。 也许有简单的css crossbrowser解决方案（不 - 不，没有IE6，哈哈），或者我需要使用javascript？ 我无法将其作为图像插入，因为我要求页面上的所有文本都应该是真实文本。

或者也许有一些Jquery插件可以解决这样的问题..

提前致谢！

Answer 1

我会使用JavaScript和一些简单的数学来计算每个标题的位置。 圆上x和y位置的公式如下：

x = radius * cos( angle )
y = radius * sin( angle )

所以使用它，你可以计算每个标题的位置：

elem.style.left = radius * Math.cos( angle ) + "px"; // angle in radians
elem.style.top = radius * Math.sin( angle ) + "px";

我做了一个演示小提琴，显示了这个： http ： //jsfiddle.net/eGhPg/

Answer 2

噢，为时已晚，你已经接受了答案:)嗯，这里有一个代码被包装成一个可重用的jQuery插件。

工作演示： http ： //jsfiddle.net/ehmEw/1/

像这样使用： $('li').semiCircle(300,50,200,100);​

这是代码：

jQuery.fn.semiCircle = function(cx,cy,radius,radiusY,startDegrees,endDegrees){
  if (radiusY===undefined)      radiusY      = radius;
  if (startDegrees===undefined) startDegrees = 0;
  if (endDegrees===undefined)   endDegrees   = 180;
  var startRadians = startDegrees*Math.PI/180,
      endRadians   = endDegrees*Math.PI/180,
      stepRadians  = (endRadians-startRadians)/(this.length-1);
  return this.each(function(i){
    var a = i*stepRadians+startRadians,
        x = Math.cos(a)*radius  + cx,
        y = Math.sin(a)*radiusY + cy;
    $(this).css({position:'absolute', left:x+'px', top:y+'px'});
  });
};

Answer 3

只是为了好玩，另一个答案，可能更重，但我已经在它的中间：

http://jsfiddle.net/vecalciskay/Rah3D/2/

希望能帮助到你