旋转圆形图像

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（a）将度数转换为弧度

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

关于使图像可链接的最后一点只是标准HTML，因为您现在只需更新＆＃34;＃＆＃34;到正确的网址