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

好吧，我尝试了一些东西，我认为它可以工作
注意： 这不是完整的代码，只是它如何工作的示例

小提琴：http : //jsfiddle.net/Spokey/eT7SD/2/
新小提琴 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 回答