17

これ（90度回転）を達成しようとしていますが、エラーなしで失敗します。この画像は<a></a>TAG内にあり、すでにトグルjquery関数があります。

<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>
4

8 に答える 8

47

サポートする必要のあるブラウザのバージョンに応じて、CSS変換を試すことができます。

まず、次のようなCSSクラスを定義します。

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

そして、リンクをクリックすると、jQueryを使用してクラスを追加できます。

<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />
于 2013-01-16T18:55:07.863 に答える
22

cssルール-webkit-transformと-moz-transform画像クリックの組み合わせを使用します。たとえば、画像を90度回転するには、クリック時に次のcssルールを適用します。

$('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});
于 2013-01-16T18:59:33.910 に答える
14

jQueryRotateなどのjQuery拡張機能について考えてみます。

これにより、onclick内の回転がはるかに簡単で読みやすくなります。

于 2013-01-16T18:48:11.650 に答える
7

これをチェックアウト： JqueryRotate

これにはやることがほとんどありません。画像自体に1つのコード例があります。

ここに画像の説明を入力してください

したがって、あなたの場合、これを行うことができます：

$(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});
于 2013-01-16T18:51:09.817 に答える
7

これにより、各クリックの追加の回転を実行できるようになります

var degrees = 0;
$('.img').click(function rotateMe(e) {

    degrees += 90;

    //$('.img').addClass('rotated'); // for one time rotation

    $('.img').css({
      'transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      '-moz-transform': 'rotate(' + degrees + 'deg)',
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-o-transform': 'rotate(' + degrees + 'deg)'
    }); 

});

https://jsfiddle.net/Lnckq5om/1/

于 2017-07-28T20:49:54.273 に答える
1

これは、次のコードのように画像を90度回転させる例です。

$(document).ready(function(){
    $("img").click(function(){
         $(this).rotate(90);
    });
 });
于 2017-09-13T07:02:35.787 に答える
0

上記の回答を使用して、現在の回転をターゲット要素のデータ属性に格納することにより、増分回転を実行するメソッドを作成しました。つまり、関数を呼び出すたびに、既存の回転に追加されます。

// Increments the rotation (in degrees) for the element with the given id
function addRotation(id, degrees) {
    var control = $('#' + id);
    var currentRotation = control.data('rotation');
    if (typeof currentRotation === 'undefined') currentRotation = 0;

    degrees += parseInt(currentRotation);

    control.css({
        'transform': 'rotate(' + degrees + 'deg)',
        '-ms-transform': 'rotate(' + degrees + 'deg)',
        '-moz-transform': 'rotate(' + degrees + 'deg)',
        '-webkit-transform': 'rotate(' + degrees + 'deg)',
        '-o-transform': 'rotate(' + degrees + 'deg)'
    });

    control.data('rotation', degrees);
}

使用法：

<img id='my-image' />

addRotation('my-image', 90);
addRotation('my-image', -90);
于 2020-08-14T10:18:07.037 に答える
0

上記の@Savageの答えがとても気に入りました。要素にクラスを追加するだけで、そのクラスの画像を回転できるようにしたかったのです。また、右側をクリックすると右（時計回り）に回転し、左側をクリックすると左（反時計回り）に回転するようにしたかったのです。

これがクリックイベントをフックしているところです（この投稿から）-私はページでjQueryを使用しているので、その耽溺を許してください-しかし、これはあなたがクリックした画像のどこに基づいて正しい回転を与えます：

        $('.tot-rotatable-image').on('click', function (e) {
            var elm = $(this);
            var xPos = e.pageX - elm.offset().left;

            if((elm.width() / 2) >= xPos){
                addRotation(e, -90);
            } else {
                addRotation(e, 90);
            }
        });

これは、セレクターではなくイベントを受け取る、わずかに変更されたバージョンのaddRotationです。これは、現在の回転をDOM要素にアタッチすることに関連して@Savageが採用したアプローチで特にうまく機能します。

        function addRotation(evt, degrees) {
            var control = $(evt.currentTarget);
            var currentRotation = parseInt(control.data('rotation'));
            degrees += isNaN(currentRotation) ? 0 : currentRotation;

            control.css({
                'transform': 'rotate(' + degrees + 'deg)',
                '-ms-transform': 'rotate(' + degrees + 'deg)',
                '-moz-transform': 'rotate(' + degrees + 'deg)',
                '-webkit-transform': 'rotate(' + degrees + 'deg)',
                '-o-transform': 'rotate(' + degrees + 'deg)'
            });

            control.data('rotation', degrees);
        }

画像が重なり合う場所に関連するスタイリングの問題がいくつかありますが、それでも、これをすばやく簡単に振りかける方法には全体的に満足しています。

于 2020-12-26T18:29:46.270 に答える