旋轉圓形圖像

Question

我正在嘗試創建5個圓形圖像，它們將圍繞一個較大的中央圓形圖像旋轉。

如果光標懸停在任何圖像上，並且所有圖像都可鏈接到其他頁面，我希望旋轉停止。

我有外部圖像的位置：

http://codepen.io/chipower/pen/mysdh

有誰知道如何做到這一點？

Answer 1

對動畫使用setInterval。這將每n毫秒調用一次相同的函數。

當鼠標懸停（jQuery.hover），然後設置一個標誌，函數SetInterval調用以查看是否應該增加項目的角度並重新佈局佈局。

如果標記清晰，則增加角度並繪製新的頂部，css項左側以圓圈形式顯示。

x = r * Math.cos(deg2Rad(a)) + cx; 
    y = r * Math.sin(deg2Rad(a)) + cy; 

其中x，y是需要的頂部，左側的CSS屬性a是角度，r是圓的cx，cy中心的半徑。

deg2Rad（一）度轉換爲弧度有關使圖像可鏈接

function deg2Rad(deg){ 
    return deg*Math.PI/180; 
} 

你的最後一點就是標準的HTML，你必須在此刻剛剛更新的「＃」正確的URL