使用css和jquery在圆圈中排列html元素
使用css和jquery在圆圈中排列html元素
提问于 2012-03-22 21:18:15
我有一套7 jQuery UI buttons。准确地说，是Buttonset。
我想把所有的按钮都排成一个圆圈。我如何使用CSS (CSS3已经过时了--寻求跨浏览器解决方案)和jQuery来安排它们？
我看过一些插件：
1) Roundrr
2) jsshapelib
和几个演示here
<div class="button-wrapper">
<button id="button-1" class="circle" >1</button>
<button id="button-2" class="circle" >2</button>
<button id="button-3" class="circle" >3</button>
<button id="button-4" class="circle" >4</button>
<button id="button-5" class="circle" >5</button>
<button id="button-6" class="circle" >6</button>
<button id="button-7" class="circle" >7</button>
</div>寻找一个jQuery解决方案，在#button-wrapper的高度和宽度内将#button-wrapper的所有子元素安排在一个圆圈中。
回答 2
Stack Overflow用户
发布于 2012-03-22 21:22:52
您可以使用position: absolute (和居中按钮上的position: relative )来定位它们。通过一些基本的数学运算，您就可以计算出top/right/bottom/left的值。
cos(angle) = right/left value
sin(angle) = top/bottom valueStack Overflow用户
发布于 2012-03-22 21:29:09
实际上，这只是数学上的问题。使用所需的大小创建Div，并将position属性设置为relative。
绝对定位中心按钮，或者获取它的大小，或者从div的中心开始计算，并绝对定位它周围的其他按钮的大小，使它们不会相互重叠，或者至少不会超过你的期望。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9823077
复制相关文章
相似问题
腾讯云开发者
