如何在单击时旋转图像答案

【问题标题】：How to rotate an image on click如何在单击时旋转图像
【发布时间】：2017-04-20 20:39:37
【问题描述】：

我有一张图片，每次点击它我都想让它旋转 180 度。这是我试过的代码：

<img id="showLayers" class="miniToolbarContant" src="../stdicons/GeomindIcons/slide.png"/>

$('#showLayers').click( function() { 
    $('#showLayers img').animate({ rotate: 180 });
});

此代码由于某种原因不起作用。任何想法为什么上面的代码不起作用？

【问题讨论】：

通过这个堆栈溢出link可能对你有帮助。
CSS rotation cross browser with jquery.animate()的可能重复

标签： javascript jquery

【解决方案1】：

首先请注意，您的问题是因为选择器不正确。它应该是 $('#showLayers') 而不是 $('#showLayers img') - 或者甚至只是 $(this)，因为您在点击处理程序的范围内。

其次，请注意，您可以通过对动画使用 CSS 并根据需要简单地切换 JS 中的类来改进逻辑：

$('#showLayers').click(function() {
  $(this).toggleClass('rotate');
});

#showLayers {
  transition: transform 0.3s;
}

.rotate {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="showLayers" class="miniToolbarContant" src="https://i.imgur.com/J5YLlJvl.png" width="250" />

【讨论】：

【解决方案2】：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    var rot =180;
    function rotateImage(test){
        test.style.webkitTransform="rotate("+rot+"deg)";

    }
</script>
</head>
<body>

<div id="imgWrapper">
    <img src="test.png" id="image" onclick="rotateImage(this)">  
</div>

</body>
</html>

【讨论】：

【解决方案3】：

好的，您可以将jquery css 方法与rotate 一起使用。使用您递增的变量，您的图片会旋转 360 度（180 x 180）。

请尝试：

var angle = 0;
$('#showLayers').click(function() {
  angle += 180
  $(this).css('-webkit-transform','rotate('+angle+'deg)'); 
});

#showLayers {
  transition: transform 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="showLayers" class="miniToolbarContant" src="https://i.imgur.com/J5YLlJvl.png" width="250" />

【讨论】：

【解决方案4】：

jQuery 中的.animate() 方法只接受整数作为属性的值，因此“180deg”是无效的，而是创建一个类并切换它

$(document).on('click', ".a", function() {
  $(".a").toggleClass('a_rotated');
})

.a {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 0.2s ease-in-out;
}
.a_rotated {
  transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="a"></div>

【讨论】：

【解决方案5】：

试试这个代码：

$('#showLayers').click(函数() { $('#showLayers img').css('transform', 'rotate(180deg)'); });

【讨论】：

【解决方案6】：

有很多方法可以做到这一点。以下是其中一种方式：

var inti = 180;

$('img').click(function(){     
     var rotate = "rotate(" + inti + "deg)";
            var trans = "all 0.3s ease-out";
    $(this).css({
         "-webkit-transform": rotate,
                "-moz-transform": rotate,
                "-o-transform": rotate,
                "msTransform": rotate,
                "transform": rotate,
                "-webkit-transition": trans,
                "-moz-transition": trans,
                "-o-transition": trans,
                "transition": trans
    });
    inti += 180;
});

演示：https://jsfiddle.net/1464bgn2/

【讨论】：

【解决方案7】：

将showLayers img 更改为#showLayers。

rotate: 180 也不是有效的样式。请参阅this answer 了解如何旋转 div。

【讨论】：