javascript - 创建列表项的拱形 (javascript)

Question

我有一个项目列表，其中包含背景图像(通过 CSS)和一些文本。简单的标记如下:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    etc...
</ul>

想象每个列表项都是一个正方形。有没有一种简单的方法将它们显示为半圆？即

   [][]
 []    []
[]      []

现在，为了让这个稍微复杂一些，有一个变量 - 列表项的数量未知，所以我需要即时解决这个问题。我可以轻松计算出每个列表项的宽度，这样它在 x 轴上看起来是正确的，我只是在 y 轴上遇到了问题。

非常感谢您的帮助。

感谢您的宝贵时间嗅探器

Answer 1

您的拱门被分为 item_count-1 片，整个圆是 2Pi 弧度，您只使用了半圆 (1Pi)。将总数 (1Pi) 除以切片数量 (item_count)，然后将其 Sin 乘以拱门的高度。

在 JavaScript 中:

for(var i=0; i<item_count; i++){
  var angle=Math.PI/(item_count - 1),
      y=(1-Math.sin(angle * i))*arch_height;
  //set the items CSS 'top' property to y
}