使用 onclick 旋转图像答案

【问题标题】：Rotate image with onclick使用 onclick 旋转图像
【发布时间】：2013-01-18 10:11:34
【问题描述】：

我尝试制作一个切换按钮，每次点击我的图像（箭头）都会旋转 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/

【问题讨论】：

标签： javascript jquery toggle

【解决方案1】：

你可以这样写。 demo

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

});

【讨论】：

如何抓取旋转后的图像来保存/替换当前图像？
现在添加 transition: 1s 并告诉我如何解决这个问题：D

【解决方案2】：

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

工作代码：

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>

【讨论】：

【解决方案3】：

这将使您能够对每个点击执行额外的旋转

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/

【讨论】：

【解决方案4】：

Click to see CSS3 transition demo

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

这些是这个演示的重要部分 =)

【讨论】：

但问题要求点击旋转，而不是悬停。

【解决方案5】：

试试这个：

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

【讨论】：

【解决方案6】：

使用 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 plugin统一所有浏览器差异。

【讨论】：