jquery旋转图像onclick

Question

我试图实现这个(90度旋转),但它失败没有错误.此图像位于<a></a>TAG内,它已具有切换jquery功能.

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

Answer 1

根据您需要支持的浏览器版本,您可以尝试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');" />

Answer 2

使用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)  */
    });
});

Answer 3

考虑一个jQuery扩展,例如:jQueryRotate

它将使onclick内部的旋转更容易,更易读.

Answer 4

结帐: JqueryRotate

这没有什么可做的,你可以在图像本身看到一个代码示例.

所以在你的情况下,你可以这样做:

$(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});

Answer 5

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

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

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/