0

回転する必要がある画像があります。この画像は、横向きまたは縦向きです。

クリックごとにステップ 90 で回転角度を受け入れる HTML5 フォームがあります。この値が変更されると、画像が回転してサイズが変更されます。幅は常に 770px である必要がありますが、必要な高さにすることができます。

次のイベント ハンドラを作成しましたが、期待どおりに動作しません。

ユースケース: 画像が縦向きの場合、初期値は 770x1027 (wxh) です。90 度回転させると、以下の関数で画像が回転し、幅 = 1027 と高さ = 770 に設定されます。しかし、私が見ているのは、幅と高さの両方が 770 に設定されていることです。 ?

$("#degrees").change(function(){
    var element$ = $("#photo-submission"),
        w = element$.width(), 
        h = element$.height(),
        deg = $(this).val();


    element$.removeAttr("style").attr({
        "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ h +"px; height: "+ w + "px;"
    })
});
4

2 に答える 2

1

CSS プロパティを変更するために実際に作成された jQuery メソッドで試してみてはどうでしょうか。そうすれば、変数を追跡して適切な場所に配置するのが簡単になります。

$("#degrees").change(function(){
    var el  = $("#photo-submission"),
        w   = el.width(), 
        h   = el.height(),
        deg = this.value;

    el.css({
        '-webkit-transform' : 'rotate(' +deg+ 'deg)',
        width  : w,
        height : h
    });
});

フィドル

これの本当の利点は、幅と高さを既存のものに設定する必要がないことです。これは基本的にあなたがしていることなので、これで十分です

$("#degrees").change(function(){
    $("#photo-submission").css({
        '-webkit-transform' : 'rotate(' + this.value + 'deg)'
    });
});
于 2013-11-14T17:41:06.827 に答える