How to make an image move in a circular path using jquery?

xidajiancun

浏览: 452428 次

最近访客更多访客>>

tzk117

sharphero

云飘雾散

makemyownlife

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1060)

社区版块

存档分类

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

};

分享到：