Javascript 将UL列表转换为径向/圆形列表
我正在尝试将信息图形图像转换为HTML/JS/CSS中可编辑的内容 我希望尽可能接近示例图像。我需要它足够灵活，不需要传递每个项目的CSS坐标，以便通过管理（添加/删除）进行编辑 我在网络上的一个例子中使用了TweenMax。但是我被卡住了。我最大的问题是如何根据文本所在的区域来定位文本（如果圆圈在右边，请将标题向右对齐，如果它在左边，请执行相同的向左对齐操作）Javascript 将UL列表转换为径向/圆形列表,javascript,html,css,gsap,Javascript,Html,Css,Gsap,我正在尝试将信息图形图像转换为HTML/JS/CSS中可编辑的内容 我希望尽可能接近示例图像。我需要它足够灵活，不需要传递每个项目的CSS坐标，以便通过管理（添加/删除）进行编辑 我在网络上的一个例子中使用了TweenMax。但是我被卡住了。我最大的问题是如何根据文本所在的区域来定位文本（如果圆圈在右边，请将标题向右对齐，如果它在左边，请执行相同的向左对齐操作） 函数半径列表（trgt）{ var itemAmount=$（trgt）.find（'.radialist item'）.leng
函数半径列表（trgt）{
var itemAmount=$（trgt）.find（'.radialist item'）.length；
var角度=0，
货币项目；
var itemStartDist=trgt.width（）*2；
对于（i=0；i.radialist{
位置：绝对位置；
身高：100%；
宽度：100%；
排名：0；
左：0；
溢出：隐藏；
}
.激进分子.激进分子btn{
位置：相对位置；
高度：330px；
宽度：330px；
左：50%；
最高：50%；
页边顶部：-165px；
左边距：-165px；
z指数：2；
文本对齐：居中；
边框：3个点#CCC；
边界半径：165px；
}
.激进分子.激进分子btn img{
位置：绝对位置；
最高：50%；
左：50%；
左边距：-107px；
利润上限：-31px；
}
.激进分子.激进分子物品{
位置：绝对位置；
左：50%；
最高：50%；
保证金：0；
列表样式类型：无；
填充：0；
}
.激进分子.激进分子物品{
位置：绝对位置；
背景：url(https://i.imgur.com/LMgR3Pe.png)无重复中心；
z指数：1；
文本对齐：右对齐；
字体系列：'Din'；
字体大小：14px；
颜色：#777；
字体大小：粗体；
文本转换：大写；
空白：nowrap；
}
电视
Telas Touch
笔记本电脑
平板电脑
- 预付款
- Estruturas箱形桁架
- 背景
- Palcos
- Caixas de som
微型手机
伊鲁米纳奥
菲马多拉斯
Máquinas fotográficas
气候变化
拉迪奥斯
图腾卡雷加多雷
- Tendas
Geradores de Energia
维迪奥游戏
传输设备
Unifilas
纸浆厂
- Máquinas de neve
- Máquinas de fumaça
- Máquinas de gelo seco
项目