如何让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

这对我有用，您可以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名称。您可以使用任何您想要的命名。