Javascript 使用onclick旋转图像

我尝试创建一个切换按钮，每次单击时，我的图像（箭头）将旋转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，但图像仅在第一次单击时旋转，然后保持“向上”。我使用此代码：

使用CSS3进行旋转：

在Mozilla Firefox中，这将是-moz变换：旋转（180度）

在基于Webkit的浏览器中，例如Chrome:-Webkit变换：旋转（180度）

在Opera中：-o变换：旋转（180度）

在IE中：-ms变换：旋转（180度）（仅IE9）

在IE9之前：不容易实现，将需要使用矩阵滤波器

---

用于统一所有浏览器差异。

这是因为“旋转角度”的值是绝对值，而不是基于上次旋转

工作代码：

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>

var旋转角度=0；

看看这个演示。它使用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);
}

这些是本演示的重要部分=）

您可以这样写

试试这个：

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

---

这将使您能够执行每个剪辑的附加旋转

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)'
    });

---

但问题要求单击旋转，而不是悬停。您如何抓取旋转后的图像以保存/替换当前图像？现在添加转换：1，并告诉我如何修复：D

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)'
    });