如何使用 javascript、样式和 HTML 围绕圆圈移动图像答案

【问题标题】：How to move images around a circle with javascript, style and HTML如何使用 javascript、样式和 HTML 围绕圆圈移动图像
【发布时间】：2013-08-06 23:42:18
【问题描述】：

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

<html>
<head>
<style>
.container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}
</style>
</head>
<body>
<div class="container">

    <img src="painting\afremov_flower_ (1).jpg" class="block tl">
    <img src="painting\afremov_flower_ (1).jpg" class="block t">
    <img src="painting\afremov_flower_ (1).jpg" class="block tr">
    <img src="painting\afremov_flower_ (1).jpg" class="block l">
    <img src="painting\afremov_flower_ (1).jpg" class="center">
    <img src="painting\afremov_flower_ (1).jpg" class="block r">
    <img src="painting\afremov_flower_ (1).jpg" class="block bl">
    <img src="painting\afremov_flower_ (1).jpg" class="block b">
    <img src="painting\afremov_flower_ (1).jpg" class="block br">

</div>
</body>
</html>

现在我正在尝试围绕中心的圆圈移动框。这怎么可能？如您所见，我没有使用任何画布，所以是否可以不创建任何画布？因为我从这个站点获得了一些代码，但它们都带有画布。

感谢您的帮助和时间。

拉娜

【问题讨论】：

标签： javascript css image

【解决方案1】：

基本上你可以这样做：

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>

见DEMO here。

希望对你有帮助。

【讨论】：

几乎正确，您忘记将 cos/sin 的度数转换为弧度。如果您在 drawCircle() 函数中添加 angle *= Math.PI / 180; ，它将完美运行。 +1 来自我。 jsbin.com/adeleb/1/edit
@Ken-AbdiasSoftware，非常感谢，添加了您的改进，现在它可以很好地旋转并且看起来几乎就像一个“转鼓”:)
@NickyDeMaeyer，好文章，我已经知道这种行为的大部分指标，但不知道有什么术语。在这种情况下，假设我忘记了我的大蒜项圈，所以我被咬了 :) 这让我也有点怀念是 HTML、样式表和 Javascript 中的新手，它让我想起了我的早在 90 年代后期，当时还没有像今天这样的社区......
以上建议是可以的，但它并没有满足我的愿望。实际上我希望每个图像都以圆形路径移动。但建议将图像放置在循环路径中的代码。
@rana，为什么不呢？它以圆形路径移动图像，为此图像也需要放置在圆形路径中，有意义吗？