How to make an image move in a circular path using jquery?-优快云博客

本文介绍如何利用jQuery库实现HTML元素沿圆形路径运动的动画效果，并提供了具体代码示例，包括基本的圆形旋转及变化半径实现螺旋式旋转的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
//id为要旋转的id,speed速度,radius半径，startx起始点的x坐标,starty起始点的y坐标
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);


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


};


$(document).ready(function() {
    animateCircle('#friends', 200, 100, 400, 250);
});
</script>
</head>
<body>
<div id="friends" style="position:absolute">a</p>


</body>
</html>

转自：http://stackoverflow.com/questions/10551380/how-to-make-an-image-move-in-a-circular-path-using-jquery/10551585#10551585

如果要实现每转一圈半径不断增大，螺旋式旋转效果可以改写成

$(id).animate({
        marginLeft: $m + 'px',
        marginTop: $n + 'px'
      }, 1, function() { 
             animateCircle.call(this, id, speed, ++radius, startx, starty, phi) //半径不断增大
          }
    );

如果想定到具体的点或者范围不在转可以改成

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);
    $(id).animate({
        left: $m + 'px',
        top: $n + 'px'
      }, 1, function() { 
            if($m <= 400){//如果left小于400px，则继续转动，否则不再调用
             animateCircle.call(this, id, speed, ++radius, startx, starty, phi);
               } 
          }
    );

};