如何在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'});
  });
};