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

注：これは私のコードではありませんが、LeaVerouがそれぞれのブログで書いたものです。

CSS3-円形アニメーションのみ

この特定のJSFiddleは、1つの要素が中心点を中心に回転していることを示しています。その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 に答える