用css和jquery排列html元素圈出

我有一組7個jQuery UI buttons。準確地說，Buttonset。用css和jquery排列html元素圈出

我想將所有按鈕排列在一個圓圈中。我該如何使用CSS（CSS3不在遊戲中尋求跨瀏覽器解決方案）和jQuery？

我看到了幾個插件：

和幾個演示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的圓圈內。

來源

2012-03-22 Jaideep Singh

所以你已經發現至少有兩個插件和演示 - 爲什麼你不能使用它們？ – JJJ 2012-03-22 13:21:04

如果它的jQuery的幾行爲什麼使用這些插件爲什麼使用這些插件 – 2012-03-22 13:24:45

如果可以通過幾行jQuery實現，爲什麼發佈這個問題？ – Sparky 2012-03-22 14:59:54

您可以使用position: absolute（和位於居中按鈕上的position: relative）來定位它們。通過一些基本的數學運算，您可以計算出top/right/bottom/left值。

cos(angle) = right/left value 
sin(angle) = top/bottom value

來源

2012-03-22 13:22:51

它不難找到絕對定位的按鈕的頂部和左側值，我想實現一個jQuery解決方案來安排一個父容器的所有孩子在一個圓圈內，就像一個函數 – 2012-03-22 14:38:31

@JaideepSingh，那麼你想要什麼？你找到了兩個完美的插件，現在這裏有一個解決方案的重要信息的答案。 – Sparky 2012-03-22 15:04:48

其實這只是數學。用你想要的大小創建一個Div，並將position屬性設置爲relative。

絕對位置的中心按鈕，並得到它的大小或計算從div的中心和絕對位置周圍的其他按鈕關於他們和中間按鈕的大小，使他們不重疊海誓山盟或至少不多比你想要的。

來源

2012-03-22 13:29:08 Tobias

用css和jquery排列html元素圈出

回答

相關問題