每次单击JQuery旋转图像

Question

我想每次单击都旋转图像。.我创建了一个函数来执行此操作，但是图像仅在第一次单击时旋转。此外，一旦图像旋转，图像的宽度和宽度都会自动更改。高度..如何每次保持相同的宽度和高度？

这是功能：

$(document).ready(function () {
    $("img").click(function () {
      $(this).rotate(45)       
    })
})

Answer 1

只需使用javascript即可轻松完成，工作示例如下所示

<div id="imgWrapper">
    <img src="Desert.jpg" id="image" onclick="rotateBy10Deg(this)">  
</div>

<script>
    var delta =0;
    function rotateBy10Deg(ele){
        ele.style.webkitTransform="rotate("+delta+"deg)";
        delta+=10;
    }
</script>

Answer 2

该插件将img转换为canvas ，这就是单击第二次不起作用的原因。 更改您的jQuery或参考此演示

$(document).ready(function() {
  $("img").click(function() {
    $(this).rotate(45);
  });
  $('body').on('click', 'canvas', function() {
    $(this).rotate(45);
  });
});

Answer 3

我建议在CSS文件中设置max-height和max-width 。 这将确保图像不超过特定大小。

Answer 4

此链接可以帮助您：

用onclick旋转图像

直接从该链接获取，以防您不想单击：

javascipt的

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>

Answer 5

我认为角度（45度）是根据其初始角度0计算得出的。图像成45度后，如果角度发生变化（例如90度），则只需旋转即可。 所以下面的代码可能有效

$(document).ready(function () {
 var angle = 0;
$("img").click(function () {
      angle = angle+45;
  $(this).rotate(angle); 
})
})

Answer 6

我按照您的建议做了，我在JQuery中使用了CSS：

CSS：

.rotate:active {
transform: rotate(180deg)
}

JQuery的：

 $(document).ready(function () {
        $("img").click(function () {
//forcing img to rotate every time on click()
            if ($(this).css("transform")=='none') {
                $(this).css("transform", "rotate(180deg)");
            }
            else {
                $(this).css("transform","")
            }
        })
    })