如何使用jQuery使图像在圆形路径上移动？

Question

我正在尝试让一张图片沿着圆形路径移动，但它并没有按照圆形路径移动。我已经尝试了这样的方法：Moving a picture around slowly CSS

#friends { position: absolute; }

标记语言

<img src="http://jsfiddle.net/img/logo.png" 
id="friends"/>

JS

function moveit() {

    var newTop = Math.floor(Math.random()*350);
    var newLeft = Math.floor(Math.random()*1024);
    var newDuration = Math.floor(Math.random()*5000);

    $('#friends').animate({
      top: newTop,
      left: newLeft,
      }, newDuration, function() {
        moveit();
      });

}

$(document).ready(function() {
    moveit();
});

在线演示：http://jsfiddle.net/W69s6/embedded/result/

有什么建议吗？

- bala3569

Answer 1

另一种变体（基于使用JavaScript循环旋转移动Div）：

var t = 0;

function moveit() {
    t += 0.05;

    var r = 100;         // radius
    var xcenter = 100;   // center X position
    var ycenter = 100;   // center Y position

    var newLeft = Math.floor(xcenter + (r * Math.cos(t)));
    var newTop = Math.floor(ycenter + (r * Math.sin(t)));

    $('#friends').animate({
        top: newTop,
        left: newLeft,
    }, 1, function() {
        moveit();
    });
}

$(document).ready(function() {
    moveit();
});​

DEMO: http://jsfiddle.net/W69s6/20/

- VisioN

---

谢谢。如何使超过一张图片围绕圆圈旋转，一个接一个地（背对背）？ - bala3569

尝试为不同的div调用多个moveit。 - VisioN

哎呀，如何在鼠标悬停时停止移动图像？ - bala3569

谢谢，工作正常。但我已经尝试了两张图片背靠背地移动，但其中一张图片移动而另一张没有移动。你能在fiddle中解决这个问题吗？ - bala3569

我不太明白你计划要做什么。根据你的描述，它应该是像这样的：http://jsfiddle.net/W69s6/25/ 或者像这样的：http://jsfiddle.net/W69s6/23/。你可以自己优化代码。 - VisioN

Answer 2

使用Animate试试这个：

function animateCircle(id, speed, radius, startx, starty, phi) {  
    if (!phi) { phi = 0 };
    var int = 2 * (Math.PI) / speed;
    phi = (phi >= 2 * (Math.PI)) ? 0 : (phi + int);
    var $m = startx - radius * Math.cos(phi);
    var $n = starty - radius * Math.sin(phi);

    $("#friends").animate({
        marginLeft: $m + 'px',
        marginTop: $n + 'px'
      }, 1, function() { 
             animateCircle.call(this, id, speed, radius, startx, starty, phi) 
          }
    );

};

你可以像这样为任何 div 调用该函数：

animateCircle('#friends', 100, 100, 400, 250);

示例: http://jsfiddle.net/W69s6/18/ 示例2: http://jsfiddle.net/W69s6/34/ 改编自这里。

- Jivings

---

完美的，谢谢。如何让多个图像围绕圆形旋转，一个接一个地（背靠背）？ - bala3569

@bala3569 只需针对具有不同变量的不同 div 重复使用该方法。我将重构我的代码以促进重用。 - Jivings

@bala3569 完成！那应该更容易了！ - Jivings

不是这样，我需要两张图像，它们需要在圆形路径上移动，并且之间有一定的间隙，就像这个网址中的演示一样：http://jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/dynamic.html。 - bala3569

@bala3569 那问题在哪里呢？只需使用我编写的函数调用几个图像即可。 - Jivings

Answer 3

请看这个很棒的插件：jQuery.path :)

- Prasenjit Kumar Nag