使用onclick旋转图像

我尝试制作一个切换按钮，每次点击我的图像（箭头）将旋转180度：

  
...CONTENT...
"; 

此代码切换我的div，但图像仅在第一次单击时旋转，然后保持“向上”。 我使用的是： http ： //code.google.com/p/jqueryrotate/

Answer 1

这是因为旋转角度的值是绝对值，而不是基于最后一次旋转。

工作代码：

jQuery的

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

HTML

更新 ：更短的代码

 var rotate_angle = 0;  

Answer 2

点击查看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); } 

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

Answer 3

你可以写这样的。 演示

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

Answer 4

试试这个：

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

Answer 5

使用CSS3进行轮换：

1. 在Mozilla Firefox中，这将是-moz-transform：rotate（180deg）
2. 在基于Webkit的浏览器中，即Chrome：-webkit-transform：rotate（180deg）
3. 在Opera中：-o-transform：rotate（180deg）
4. 在IE中：-ms-transform：rotate（180deg）（仅限IE9）
5. 在IE9之前：不太可能，需要使用Matrix Filter

使用jQuery旋转插件来统一所有浏览器差异。

Answer 6

这将使您能够执行每个clik的额外轮换

 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/