Question

我想在每次点击它时旋转图像..我已经创建了一个功能来执行此操作但图像仅在我第一次点击时旋转...此外，一旦图像旋转它会自动更改宽度和高度..每次如何保持相同的宽度和高度？

这是功能：

_y

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或参考此demo

$(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

此链接可能会帮助您：

Rotate image with 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","")
            }
        })
    })

每次单击JQuery时旋转图像

6 个答案: