5

首先我想说我是一个完整的 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. 围绕此按钮缓慢旋转图像
4

3 回答 3

6

注意：这不是我的代码，而是由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>☻&lt;/div></div>

基本上，您所要做的就是将这些转换为 CSS 类，然后只需在您的中央按钮上添加一个单击处理程序，该处理程序会淡入它周围的图像并向它们添加一个 CSS 类，这样它们也将开始旋转。

于 2012-11-09T12:20:20.340 回答
4

这对我有用，您可以根据INPUT需要在 HTML 中添加任意数量的元素。

（更新：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和 CSSclass名称。你可以使用任何你想要的命名。

于 2012-11-09T11:52:38.327 回答
0 

    $(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>

于 2012-11-09T12:30:02.873 回答