如何使用jQuery创建具有不同对象的圆形动画？

如何使用jQuery创建具有不同对象的圆形动画。 我试过自己，但问题是我的脚本运行不顺畅。

我想要这个有生命力的但是顺利的方式：

努力 ： http ： //jsfiddle.net/eT7SD/

Html代码

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; }  

脚本

  $(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); });  

编辑

我必须通过点击/停止事件添加更多动画。 当用户点击270的红色图像位置时，他们必须更换90的位置，动画将停止; 为了更清楚，你必须看到下面的图像。 我试过@Cristi Pufu代码，但我想要更多修改

努力http://jsfiddle.net/SaNtf/

Answer 1

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

使用math和jQuery ： http ： //jsfiddle.net/eT7SD/7/

使用CSS3 Rotation （只是为了好玩）： http ： //jsfiddle.net/dMnKX/

只需在你的动画divs中添加一个class ‘box’，就像在fiddle ，使用这个js ：

 $(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 ， height属性，标准化它们，设置正确的unit （ circle radius ）和初始angles 。 但是对于预览，我认为这是你想要的（只需要更多的工作）。

示例： http ： //jsfiddle.net/eT7SD/7/

视角理解角度：

Answer 2

只需使用CSS3旋转图像：

HTML

 
 ... (all your images here)  

JavaScript的：

Answer 3

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

FIDDLE： http ： //jsfiddle.net/Spokey/eT7SD/2/
NEW FIDDLE http://jsfiddle.net/Spokey/eT7SD/3/(6 images）

我用了 。 来自jQuery的position()获取div1 - div6的位置div1 - div6 。
然后使用.animate()将图像移动到那里。

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

HTML

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); });