Jquery 如何使4个元素在一个圆中旋转？

首先，我想说我是jquery的完全初学者。 我想让这些div以一个直径为500px的顺时针方向绕一圈移动。我怎么能这样做呢

<div id="move0" class="textBox"></div>
<div id="move1" class="textBox"></div>
<div id="move2" class="textBox"></div>
<div id="move3" class="textBox"></div>

请看我的网站 这就是我希望能够发生的事情

步骤：

点击中间的按钮

图像显示在此按钮周围（淡入）

围绕此按钮缓慢旋转图像

---

这对我很有用，您可以根据需要在HTML中添加任意多的

INPUT

元素

（更新：链接。）

//获取DIV#txtBoxRotateContainer中的所有DIV.txtBoxRotate元素
var txt=$（'#txtBoxRotateContainer.txtBoxRotate'），txtLen=txt.size（）；
//将度转换为弧度的实用函数
var deg2rad=函数（a）{返回a*Math.PI/180.0；}
//旋转设置
var角度=0，速度=1，延迟=10，r=250；
（函数旋转（）{
对于（var i=0；i
注意：这不是我的代码，而是她在各自的博客上写的

仅CSS3循环动画
这张图显示了一个元素围绕某个中心点旋转。它的CSS实际上非常简单：


@关键帧圆{
从{变换：旋转（0度）；}
到{变换：旋转（360度）；}
}
@内圆关键帧{
从{变换：旋转（0度）；}
到{变换：旋转（-360度）；}
}
正文>div{
宽度：100px；
高度：100px；
利润率：20px自动0；
颜色：橙色；
字体大小：100px；
线高：1；
动画：圆形5s线性无限；
变换原点：50%200px；
}
div>div{
动画：内圈5s线性无限；
}
☻
$（文档）.ready（函数（）{
变量元素=$（'.textBox'）；
变量长度=elements.length；
var offsetX=300；
var offsetY=300；
变量半径=250；//半径=直径（500px）/2
var incr=数学PI*2/长度；
var进程=0；
setInterval（函数（）{
进步++；
元素。每个（功能（i）{
$（this.css）({
顶部：offsetY+Math.sin（i*incr+（（进度/100）*Math.PI*2））*半径，
左：偏移量x+数学系数cos（i*incr+（（进度/100）*Math.PI*2））*半径
});
});
如果（进度>=100）{
进度=0；
}
}, 50);
})；
.textBox{
位置：绝对位置；
宽度：50px；
高度：50px；
背景：红色；
}

AD格式：见过工具栏吗？工具栏上有一个大括号按钮，用于将选定文本格式化为代码…：）阅读有助于你在写作时格式化文本。问：你的div也应该是圆吗？既然你说你不知道jQuery，那么你可能知道CSS3？因为它完全可以通过CSS3动画完成。你有任何链接显示最终结果应该是什么样的吗？youtube视频？动画图像？Flash动画？任何内容？我找不到任何内容没有。我想发生的是，当你点击T恤时，图像会显示在div框中，然后慢慢旋转T恤按钮？这将显示圆形的图像..对不起，我不知道你可以使用CSS3？你知道我如何使用CSS3吗？非常感谢你的帮助到目前为止。sin和cos的使用非常广泛。在大学里，你忘了使用它，如果你详细解释一下逻辑会更好。谢谢你的回复。我希望图像旋转而不是文本框。@user1806497，你可以简单地更改图像的
DIV
容器的内容。脚本不关心内容：）@RobertKoritnik，是的，我考虑过。我很懒：）@user1806497，在这里，我把输入框改成了图像。干杯！你能解释得更详细些吗？我不太明白。比如什么是点击处理程序？把什么转换成css？转换成什么？@user1806497：好的，那么你也不知道css的任何内容吗？：）好的……在你开始之前在网站上，我想主要是学习技术。这包括服务器端和客户端（CSS、HTML和Javascript，以及jQuery）。@user1806497：当前的CSS样式直接在任何DIV（以及DIV中的DIV）上定义动画。你不想这样。你只想在特定元素有特定CSS类时将其应用于特定元素。当它们有特定CSS类时，开始旋转。学习CSS；学习jQuery，你就会知道我在说什么。我们在这里帮助你，而不是开发你应该开发的东西。一个人不会在赛季开始时骑250公里的自行车.如果您不了解技术，请使用您所知道的。然后学习并升级您的产品。