如何使用javascript、style和HTML在一个圆圈内移动图像

我是HTML、样式表和Javascript方面的新手。我创造了这个 （更改图像参考）

.集装箱
{
宽度：300px；
高度：300px；
位置：相对位置；
利润率：100像素；
}
.block，.center
{
宽度：25%；
身高：25%；
背景：#5aa；
边界半径：10px；
位置：绝对位置；
左：50%；
最高：50%；
左边缘：-12%；
利润率最高：-12%；
}
居中
{
宽度：30%；
身高：30%；
左边缘：-15%；
利润率最高：-15%；
边界半径：100%；
}
.tl
{
左：20%；
最高：20%；
}
.tr
{
左：80%；
最高：20%；
}
.br
{
左：80%；
最高：80%；
}
.bl
{
左：20%；
最高：80%；
}
T
{
排名前10%；
}
R
{
左：90%；
}
B
{
最高：90%；
}
L
{
左：10%；
}

现在我试着在中心的圆圈周围移动盒子。怎么可能呢？ 正如你所看到的，我没有使用任何画布，所以不创建任何画布是否可能？ 因为我从这个网站上得到了一些代码，但它们都是画布

谢谢你的帮助和时间

---

拉纳

基本上你可以这样做：

Javascript文件

function drawCircle(selector, center, radius, angle, x, y) {
  var total = $(selector).length;
  var alpha = Math.PI * 2 / total;
  angle *= Math.PI / 180;

  $(selector).each(function(index) {
    var theta = alpha * index;
    var pointx  =  Math.floor(Math.cos( theta + angle ) * radius);
    var pointy  = Math.floor(Math.sin( theta + angle ) * radius );

    $(this).css('margin-left', pointx + x + 'px');
    $(this).css('margin-top', pointy + y + 'px');
  });
}

CSS

.container { 
  width:800px; margin:0 auto;
}

.box {    
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
  background-position:0px 0px;
  background-color:#ccc;
  position:absolute;
  background-repeat:no-repeat;
  float:left;
  height:120px;
  margin:18px;
  position:absolute;
  width:120px;
  padding:5px;
}

HTML标记

<div class="container">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
</div>

看

---

希望有帮助。

几乎正确，您忘记了将cos/sin的度转换为弧度。如果添加

angle*=Math.PI/180

在

drawCircle（）

函数中，它将完美工作+从我这里得到1@Ken AbdiasSoftware，非常感谢，添加了您的改进，现在它旋转得很好，几乎像一个“旋转的鼓”：@NickydeMayer，很好的文章，我已经知道这种行为的大多数指标，但不知道有一个术语。在这种情况下，让我们假设我忘记了我的大蒜项圈，所以我被咬了：）这让我也觉得有点怀旧，因为我在HTML、样式表和Javascript方面是新的，它让我想起了我90年代末的早期，当时没有像今天这样的社区……上面的建议是可以的，但它并没有实现我的愿望。事实上，我希望每个图像都能以圆形路径移动。但建议代码将图像放置在圆形路径中。@rana，为什么不呢？它以循环路径移动图像，要这样做，图像也需要放置在循环路径中，有意义吗？

<div class="container">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
  <img src="http://placehold.it/150x150" class="box">
</div>