Jak przesuwać obraz po ścieżce cyklicznej za pomocą jquery?

Question

Tutaj staram się zrobić ruch obrazu w torze kołowym, ale to nie jest w ruchu okrężnym path..I próbowali jak ten Moving a picture around slowly

CSS

#friends { position: absolute; } 

Markup

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

żywo demo: http://jsfiddle.net/W69s6/embedded/result/

Wszelkie sugestie?

Answer 1

Inny wariant (na podstawie 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(); 
});​ 

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

Answer 2

Spójrz na tej niesamowitej wtyczce jQuery.path :)

Answer 3

Spróbuj używając 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) 
      } 
    ); 

}; 

można wywołać funkcję dla każdego div tak:

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

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

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

Adaptacja here.