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

Question

我似乎不知道如何以半圆形形式标记短语列表（在附图中名为 title1、title2、title3 等）。也许有简单的 css 跨浏览器解决方案（不，不，没有 IE6，哈哈），或者我需要使用 javascript？我不能将它作为图像插入，因为我要求页面上的所有文本都应该是真实文本。

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

提前致谢！

score 11 · Accepted Answer

我会使用 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/

score 10 · Accepted Answer

10

于 2012-06-04T23:55:13.053 回答

score 3 · Accepted Answer

Just for fun, another answer, probably heavier but i was already in the middle of it:

hope it helps

3 回答 3