4

jQuery を使用して、さまざまなオブジェクトで円形のアニメーションを作成する方法。私は自分で試しましたが、問題はスクリプトがスムーズに実行されないことです。

私はこれをアニメーションにしたいが、スムーズな方法で:

ここに画像の説明を入力

取り組み： http: //jsfiddle.net/eT7SD/

HTML コード

<div id="apDiv1"><p><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-1"/></p></div>
<div id="apDiv2"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZv4hqGcyV6OqP0hI3uAiQVwHHgPuqcTl2NppFRyvbxXLVokbs"  width="200" height="115" id="img-2"/></p></div>
<div id="apDiv3"><p><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQaplzZIaF-uTQKnvfK9N9i-Rg27F6aHtSchQZaGR-DITgO1bDwzA"  width="200" height="115" id="img-3"/></p></div>
<div id="apDiv4"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQjTbe5WfEnT840gIChKfbzlVnoPPoZsyrT4zjMReym9YpsRdOFvA"  width="200" height="115" id="img-4"/></p></div>
<div id="apDiv5"><p><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRWtiMAcxGe-RQw2gRwUUiyB5aRTMeVMG5LSCPF0Qpzes-USpgyTw"  width="200" height="115" id="img-5"/></p></div>
<div id="apDiv6"><p><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTXDhOygDcNsNVsv0eIXLYdBx4C-tmedIRhFfxGlCoCfNy04YU_"  width="200" height="115" id="img-6"/></p></div>
<div id="apCenterDiv"><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR42cgsKsYMWey79jT0XsTkMOyxc9oej9fVt-udxQvnVFOadpPQ"  width="200" height="115" /></div>

CSS コード

<style type="text/css">
#apCenterDiv {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    left: 571px;
    top: 209px;
}
#apDiv1 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:2;
    left: 570px;
    top: 4px;
}
#apDiv2 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
    left: 821px;
    top: 134px;
}
#apDiv3 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:4;
    left: 822px;
    top: 328px;
}
#apDiv4 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:5;
    left: 572px;
    top: 385px;
}
#apDiv5 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:6;
    left: 319px;
    top: 329px;
}
#apDiv6 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:7;
    left: 319px;
    top: 135px;
}
</style>

脚本

<script>
$(document).ready(function(e) {

      setInterval(function() {

        var imgfirstSrc = $("#img-1").attr("src");
        var imgSecSrc = $("#img-2").attr("src");
        var imgthirdSrc = $("#img-3").attr("src");
        var imgfourthSrc = $("#img-4").attr("src");
        var imgfifthSrc = $("#img-5").attr("src");
        var imgsixthSrc = $("#img-6").attr("src");


        $("#img-2").attr("src",imgfirstSrc);
        $("#img-3").attr("src",imgSecSrc);
        $("#img-4").attr("src",imgthirdSrc);
        $("#img-5").attr("src",imgfourthSrc);
        $("#img-6").attr("src",imgfifthSrc);
        $("#img-1").attr("src",imgsixthSrc);



      },1000);
});
</script>

編集

クリック/停止イベントを含むアニメーションをさらに追加する必要があります。ユーザーが 270 の赤い画像の場所をクリックすると、90 の場所を置き換える必要があり、アニメーションが停止します。より明確にするために、下の画像を参照する必要があります。@Cristi Pufuコードを試しましたが、さらに変更が必要です

取り組み http://jsfiddle.net/SaNtf/

ここに画像の説明を入力

4

3 に答える 3

8

使用jQuery Animation: http://jsfiddle.net/eT7SD/6/

mathとの使用jQuery: http://jsfiddle.net/eT7SD/7/

使用CSS3 Rotation(楽しみのため): http://jsfiddle.net/dMnKX/

のようにclassアニメーションに「ボックス」を追加して、これを使用するだけです：divsfiddlejs

$(document).ready(function(e) {

    var animate = function(){

        var boxes = $('.box');

        $.each(boxes, function(idx, val){

            var coords = $(boxes[idx+1]).position() || $(boxes[0]).position();

            $(val).animate({

                "left" : coords.left,
                "top" : coords.top

            }, 1500, function(){})   

        });
    }

    animate();

    var timer = setInterval(animate, 2000);  
});

編集：

$(document).ready(function(e) {
    var angles = [90, 45, 315, 270, 225, 135];
    var unit = 215;

    var animate = function(){

        $.each($('.box'), function(idx, val){

            var rad = angles[idx] * (Math.PI / 180);
            $(val).css({
                left: 550 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad))  + 'px'
            });

            angles[idx]--;
        });

    }
    var timer = setInterval(animate, 10);

});

ボックスのleft、top、width、プロパティを変更し、それらを標準化し、正しい( ) と初期値を設定する必要があります。しかし、プレビューについては、これがあなたが望むものだと思います（もう少し作業が必要です）。heightunitcircle radiusangles

例: http://jsfiddle.net/eT7SD/7/

角度の視覚的理解:

円の角度

于 2013-04-11T12:14:22.323 に答える
4

CSS3 を使用して画像を回転させるだけです。

html

<div id='container'>
... (all your images here)
</div>

JavaScript:

<script type='text/javascript'>
window.myRotation=0;
$(document).ready(function(e) {
      setInterval(function() {
        $("#container").css("transform","rotate(" + window.myRotation + "deg)");
        $("#container").css("-ms-transform","rotate(" + window.myRotation + "deg)");
        $("#container").css("-webkit-transform","rotate(" + window.myRotation + "deg)");
        window.myRotation +=20;
      },50);
});
</script>
于 2013-04-11T11:32:08.313 に答える
1

私は何かを試してみましたが、うまくいくと思います
注: これは完全なコードではなく、どのように動作するかの例にすぎません

FIDDLE: http://jsfiddle.net/Spokey/eT7SD/2/
新しい FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/ (6 画像)

使用しました。position()jQuery から の位置を取得しdiv1 - div6ます。
次に、を使用して画像をそこに移動しました.animate()。

http://api.jquery.com/position/
http://api.jquery.com/animate/

HTML

<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-1"/>
<img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png"  width="200" height="115" id="img-2"/>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apCenterDiv"></div>

JavaScript

$(document).ready(function(e) {
      var i = 1;
        var j = 2;
      setInterval(function() {
          if(i===7){i=1;}
          if(j===7){j=1;} 
          var divd = $("#apDiv"+i).position();
          var divds = $("#apDiv"+j).position();
          $("#img-1").stop().animate({left:(divd.left), top:(divd.top)});
          $("#img-2").stop().animate({left:(divds.left), top:(divds.top)});
          i++;j++;
      },1000);
});
于 2013-04-11T11:41:32.883 に答える