Вопрос по jquery – Как заставить изображение двигаться по кругу, используя jquery?

7

Здесь я пытаюсь заставить изображение двигаться по круговой траектории, но оно не движется по круговой траектории. Я пытался вот такМедленное перемещение картинки

CSS

<code>#friends { position: absolute; }
</code>

наценка

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

JS

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

Живая демоверсия:http://jsfiddle.net/W69s6/embedded/result/

Любое предложение??

Точный круг? Jivings
да точный круг .. bala3569

Ваш Ответ

3   ответа
3

Взгляните на этот удивительный плагинjQuery.path :)

Error: User Rate Limit Exceeded bala3569
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded bala3569
11

Другой вариант (на основеDiv Перемещение в цикле вращения с использованием 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/

Error: User Rate Limit Exceeded bala3569
Error: User Rate Limit Exceeded bala3569
Error: User Rate Limit Exceeded bala3569
Error: User Rate Limit ExceededmoveitError: User Rate Limit ExceededdivError: User Rate Limit Exceeded
Error: User Rate Limit Exceededjsfiddle.net/W69s6/22
3

Попробуйте это с помощью 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) 
          }
    );

};

& # X200B; Вы можете вызвать функцию для любогоdiv как это:

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

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

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

Адаптированы изВот.

Error: User Rate Limit Exceeded bala3569
Error: User Rate Limit ExceededdivError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded bala3569
Error: User Rate Limit Exceeded

Похожие вопросы