2

タイトルが示すように、ユーザーがボタンをクリックすると画像を回転させようとしています。私はjavasriptを初めて使用するので、まだ物事がどのように機能するかを理解しようとしています。良い例を見つけましたが、2 つの画像は常に回転しています。画像を 45 度 1 回だけ回転させたい。

ここにあるように画像を回転させたい: http://jsfiddle.net/Pvtzv/276/しかし、毎回ではなく、一度だけ

これが私がこれまでに持っているものです：

   function doSpin()
{

    wheel = new Image();
    //wheel.onload = initialDraw; // Once the image is loaded from file this function is called to draw the image in its starting position.
    wheel.src = "./female_avatar.gif";
        var surfaceContext = surface.getContext('2d');
surfaceContext.drawImage(wheel, 0, 0);

p += .02;

var r = 100;
var xcenter = 150;
var ycenter = 150;


var newLeft = Math.floor(xcenter + (r* Math.cos(p)));
var newTop = Math.floor(ycenter + (r * Math.sin(p)));
var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p)));
var newTop1 = Math.floor(ycenter + -(r * Math.sin(p)));

     wheel.animate({
        top: newTop,
        left: newLeft,
    }, 2, function() {
        doSpin()
            });

       }

私のhtmlで

    <button onclick="doSpin()">spin image</button>
4

2 に答える 2

1

doSpin()関数内のコールバックを削除するだけanimate()です:

wheel.animate({
    top: newTop,
    left: newLeft,
}, 2);
于 2013-05-16T14:41:41.967 に答える
1 
<button onclick="moveit();">spin image</button>

スクリプトタグにコードを追加します

function moveit() {
    p += .02;

    var r = 100;
    var xcenter = 150;
    var ycenter = 150;


    var newLeft = Math.floor(xcenter + (r* Math.cos(p)));
    var newTop = Math.floor(ycenter + (r * Math.sin(p)));
    var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p)));
    var newTop1 = Math.floor(ycenter + -(r * Math.sin(p)));

    $('#friends').animate({
            top: newTop,
            left: newLeft,
        }, 2, function() {
            moveit()
                });
    $('#friends2').animate({
        top: newTop1,
        left: newLeft1,
    },10, function() {
        moveit();
    });
 }

ここで動作しましたhttp://jsfiddle.net/cExsw/

于 2013-05-16T14:45:29.187 に答える