jquery - 如何使用jquery使图像在圆形路径中移动？

在这里，我试图使图像沿圆形路径移动，但它没有沿圆形路径移动..我已经尝试过像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/

有什么建议吗？

最佳答案

另一个变体(基于Div Moving in cycle rotation using Javascript):

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

演示: http://jsfiddle.net/W69s6/20/

关于jquery - 如何使用jquery使图像在圆形路径中移动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10551380/