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

【问题标题】：How to make an image move in a circular path using jquery?如何使用 jquery 使图像在圆形路径中移动？
【发布时间】：2012-05-11 12:31:54
【问题描述】：

在这里我试图让图像在圆形路径中移动，但它没有在圆形路径中移动..我尝试过这样Moving a picture around slowly

CSS

#friends { position: absolute; }

标记

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

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/

有什么建议吗？？

【问题讨论】：

标签： jquery

【解决方案1】：

另一个变种（基于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/

【讨论】：

：谢谢..如何使多个图像围绕一个圆圈旋转..一张一张（背靠背）
尝试为不同的divs 调用多个moveit。
ya..如何在鼠标悬停时停止移动图像？？
感谢 man.working 很好..但我已经尝试过两张图片背靠背移动..但是一张图片正在移动，另一张没有移动..你能用小提琴制作它吗
我没有得到你想要的东西。根据您的描述，应该是这样的：jsfiddle.net/W69s6/25。或者像这样：jsfiddle.net/W69s6/23。您可以自己优化代码。

【解决方案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/

DEMO 2：http://jsfiddle.net/W69s6/34/

改编自here。

【讨论】：

：完美..谢谢..如何使多个图像围绕一个圆圈旋转..一种方式（背靠背）
@bala3569 只需对具有不同变量的不同div 重复该方法即可。我将重构我的代码以促进重用。
@bala3569 完成！那应该更容易！
：没有人不喜欢这样..我需要两张图像，它们必须在圆形路径中移动，这两个图像之间有一定的间隙，就像这样jquery-ui.googlecode.com/svn/branches/labs/carousel/demo/…
@bala3569 那么有什么问题呢？只需调用我用几张图片编写的函数即可。

【解决方案3】：

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

【讨论】：