8

ここで、画像を円形のパスで移動させようとしていますが、円形のパスで移動していません..私はこのように試しました

CSS

#friends { position: absolute; }

マークアップ

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

ライブデモ: http://jsfiddle.net/W69s6/embedded/result/

なにか提案を？？

4

3 に答える 3

4

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/

デモ 2 : http://jsfiddle.net/W69s6/34/

ここから適応。

于 2012-05-11T12:39:41.427 に答える
3

この素晴らしいプラグインjQuery.pathを見てください:)

于 2012-05-11T12:35:14.167 に答える