javascript - オンクリックで画像を回転

Question

画像（矢印）がクリックするたびに180度回転するトグルボタンを作成しようとしています。

<a href='#' onclick='$(\"#divToggle\").slideToggle(\"slow\");'>
<img src='blue_down_arrow.png' onclick='$(this).rotate(180);' /></a>

<div id='divToggle' style='display:none;'>...CONTENT...</div>";

このコードはdivを切り替えますが、画像は最初のクリックでのみ回転し、その後「上」のままになります。私はこれを使用しています：http ：//code.google.com/p/jqueryrotate/

score 3 · Accepted Answer

あなたはこのように書くことができます。デモ

jQuery(document).ready(function(){
   var deg_temp =45;
  jQuery("#image1").click(function(){
     deg_temp = deg_temp+30;
  jQuery(this).rotate(deg_temp);
  })

});

score 2 · Accepted Answer

これは、回転角の値が最後の回転に基づくのではなく、絶対値であるためです。

作業コード：

jQuery

var rotate_factor = 0;

function rotateMe(e) {
    rotate_factor += 1;
    var rotate_angle = (180 * rotate_factor) % 360;
    $(e).rotate({angle:rotate_angle});
}

HTML

<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>

更新：短いコード

var rotate_angle = 0;

<img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>

score 2 · Accepted Answer

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

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/

score 1 · Accepted Answer

ローテーションにはCSS3を使用します。

Mozilla Firefoxでは、これは-moz-transformになります：rotate（180deg）
Webkitベースのブラウザ、つまりChromeの場合：-webkit-transform：rotate（180deg）
Operaの場合：-o-transform：rotate（180deg）
IEの場合：-ms-transform：rotate（180deg）（IE9のみ）
IE9以前：簡単には不可能で、マトリックスフィルターを使用する必要があります

jQueryのrotateプラグインを使用して、ブラウザーのすべての違いを統合します。

score 1 · Accepted Answer

クリックしてCSS3移行デモをご覧ください

このデモをチェックしてください。トランジション+トランスフォームローテーションにCSS3を使用します

.testRotate{
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

.testRotate:hover{
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

これらはこのデモの重要な部分です=）

score 1 · Accepted Answer

これを試して：

$('img').click(function(){
$('img').rotate({ angle: 0, bind:{
    "click":function(){
      $(this).rotate({animateTo:360});
    }
  }
 });
});

javascript - オンクリックで画像を回転

6 に答える 6

Related

Reference