如何让4个元素围成一圈旋转？

Question

首先，我想说我是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>

请查看我的网站http://tragicclothing.co.uk/T-Shirts.html 这就是我希望能够发生的事情

步骤：

1. 点击中心的按钮
2. 此按钮周围出现图像（淡入）
3. 围绕此按钮慢慢旋转图像

Answer 1

  

注意： 这不是我的代码，而是由Lea Verou在她各自的博客上撰写。

仅限CSS3的圆形动画

此特定JSFiddle显示一个元素围绕某个中心点旋转。它的CSS实际上非常简单：

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}

body > div {
    width:100px;
    height:100px;
    margin: 20px auto 0;
    color:orange;
    font-size:100px;
    line-height:1;
    animation: circle 5s linear infinite;
    transform-origin:50% 200px;
}

div > div {
    animation: inner-circle 5s linear infinite;
}

<div><div>☻</div></div>

基本上你所要做的就是将它们转换为CSS类，然后在你的中央按钮上添加一个点击处理程序，它会淡化你周围的图像并为它们添加一个CSS类，这样它们就会开始像好。

Answer 2

这适用于我，您可以根据需要在HTML中添加尽可能多的INPUT个元素。

（更新：JSFiddle链接。）

// fetch all DIV.txtBoxRotate elements inside DIV#txtBoxRotateContainer
var txt = $('#txtBoxRotateContainer .txtBoxRotate'), txtLen = txt.size();
// utility functions to convert degrees to radians    
var deg2rad = function(a) { return a*Math.PI/180.0; }
// rotation settings
var angle = 0, speed = 1, delay = 10, r = 250;

(function rotate() {
    for (var i=0; i<txtLen; i++) {
        // we know how many elements we have, so we will add an even
        // amount of degrees of angle for each of them to complete a circle
        var a = angle + (i * 360 / txtLen);
        // we reposition our element by using {sin(a),cos(a)} for our initial
        // position. If you want to change direction, switch to {cos(a),sin(a)}!
        // then we multiply the x,y by our radius and add our radius to center
        // then element. You may add another offset if you want (ex: y+r+(Math.sin...)
        $(txt[i]).css({top: r+(Math.sin(deg2rad(a))*r), left: r+(Math.cos(deg2rad(a))*r)});
    }
    // increment our angle and use a modulo so we are always in the range [0..360] degrees
    angle = (angle + speed) % 360;
    // after a slight delay, call the exact same function again
    setTimeout(rotate, delay);
})();  // invoke this boxed function to initiate the rotation

#txtBoxRotateContainer { height: 800px; }
.txtBoxRotate { position:absolute; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="txtBoxRotateContainer">
    <div class="txtBoxRotate"><img src="http://www.google.com/logos/2012/uganda12-hp.jpg" alt="Google!" /></div>
    <div class="txtBoxRotate"><img src="http://www.google.com/logos/2012/Googles_14th_Birthday-2012-2-hp.gif" alt="Google!" /></div>
    <div class="txtBoxRotate"><img src="http://www.google.com/logos/2012/bohr11-hp.jpg" alt="Google!" /></div>
</div>

注意：原始代码包含INPUT元素（因为这是我对您的class="textBox"所假设的），因此id和CSS {{1名字。你可以使用你想要的任何命名。

Answer 3

    $(document).ready(function() {
      var elements = $('.textBox');
      var length = elements.length;
      var offsetX = 300;
      var offsetY = 300;
      var radius = 250; //radius = diameter(500px) / 2 
      var incr = Math.PI * 2 / length;
      var progress = 0;

      setInterval(function() {
        progress++;
        elements.each(function(i) {
          $(this).css({
            top: offsetY + Math.sin(i * incr + ((progress / 100) * Math.PI * 2)) * radius,
            left: offsetX + Math.cos(i * incr + ((progress / 100) * Math.PI * 2)) * radius
          });
        });
        if (progress >= 100) {
          progress = 0;
        }
      }, 50);
    });

.textBox {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="move0" class="textBox"></div>
<div id="move1" class="textBox"></div>
<div id="move2" class="textBox"></div>
<div id="move3" class="textBox"></div>