1

この jQuery プラグインを使用しています: http://code.google.com/p/jqueryrotate/wiki/Documentation

私はプラグインを動作させていますが、私ができるようにしたいのは、ボタンをクリックして画像を回転させることです。ボタンをクリックするたびに、特定の角度だけでなく、+/- 90 度連続して回転します。このプラグインでこれを達成する方法がよくわかりません。

理想的には、以下のコードは私が望むことを行いますが、そうではありません。

$("body").on("click", ".theater-wrapper img", function(){

    $(".theater-wrapper .current").rotate(+90);

});
4

4 に答える 4

2

このようなもの？

$("body").on("click", ".theater-wrapper img", function(){

    $(".theater-wrapper .current").rotate(getNextAngle());

});

nextAngle = 0;
function getNextAngle() {
    nextAngle += 90;    
    if(nextAngle >= 360) {
        nextAngle = 0;
    }
    return nextAngle;
}

おそらく大したことではありませんが、膨大な数になるのを避けるために、必要に応じて値を 0 にリセットできます。

于 2012-10-16T02:58:33.910 に答える
2

実際のデモ http://jsfiddle.net/jKYkT/

角度回転の+および-ボタンをクリックします。

これが原因に当てはまることを願っています:)

コード

newangle = 0;

$('input').click(function() {
    if ($(this).attr('class') == "minus")
        operation = "-";
    else
        operation = "+";

    alert(operation)
    var angle = next(operation);
    $("#image").rotate(angle);
});

function next(oper) {
   if (oper == "+")
      newangle += 90;
    else
      newangle -= 90;

   if (newangle >= 360) newangle = 0;

    return newangle;

}


​
于 2012-10-16T03:17:18.210 に答える
0

私はプラグインを見ていませんが、クロスブラウザーでサポートされている CSS3 変換回転を使用すると想定しています。常に特定の角度が必要になるため、何らかの変数を使用して現在の角度を追跡する必要があります。特に DOM で複数の画像を回転させたい場合は、クリックごとにインクリメントする HTML5 データ タグを使用することをお勧めします。あなたのHTMLがこれだとしましょう：

<div class='image_wrap'>
    <img class='image_to_rotate' />
    <div class='rotate_btn' data-rotate='0'></div>
</div>

したがって、ユーザーが回転ボタンをクリックすると、この変数が取得されて 90 ずつインクリメントされ、新しい値が同じ場所に格納されるため、次のクリックで値をインクリメントする準備が整います。jQuery は次のようになります。

$('.rotate_btn').click(function(){
    //Grab the current set angle
    var angle = parseInt($(this).data('rotate')) + 90;

    //Rotate the image
    $(this).siblings('.image_to_rotate').rotate(angle);

    //Store new angle for next increment
    $(this).data('rotate', angle);
})

これはテストされていませんが、ここで続行するのに十分なはずです。さらに詳しいガイダンスが必要な場合は、.data に関する jQuery ドキュメントを確認してください。

于 2012-10-16T03:10:23.880 に答える
0 
var rotation = 0;
$("body").on("click", ".theater-wrapper img", function(){
    rotation +=90;
    $(".theater-wrapper .current").rotate({ animateTo:rotation });
});

また

var rotation = 0;
$("body").on("click", ".theater-wrapper img", function(){
    rotation +=90;
    var rotation_angle_mod = rotation%360;
    $(".theater-wrapper .current").rotate(rotation_angle_mod);
});
于 2014-09-12T11:29:36.827 に答える