Geek asks and answers

How to arrange semicircle elements in css / html / js

It seems to me that it’s lost how to mark the list of phrases (named title1, title2, title3, etc. on the attached image) in a semicircular form. Maybe there is a simple css crossbrowser solution (no-no, no IE6, ha-ha), or do I need to use javascript? I cannot insert it as an image because I have a requirement that all the text on the page be real text.

Or maybe there are some jQuery plugins that can solve this problem.

example

Thanks in advance!

+5
source share
3 answers

I would use JavaScript and some simple math to calculate the position of each header. The formula for the position of x and y on the circle is as follows:

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/

+10

Aw, , :) , , jQuery.

: http://jsfiddle.net/ehmEw/1/

      enter image description here

: $('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'});
  });
};
+9

Just for fun, another answer is probably harder, but I was already in the middle of it:

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

hope this helps

+3
source

More articles:


All Articles