如何在点击时旋转图像
[英]How to rotate an image on click
问题描述
I have an image and each time I click on it I want to make it rotate 180 degrees. 
我有一张图片，每次单击它都想使其旋转180度。 This is the code I tried: 这是我尝试的代码：
<img id="showLayers" class="miniToolbarContant" src="../stdicons/GeomindIcons/slide.png"/>
$('#showLayers').click( function() {
$('#showLayers img').animate({ rotate: 180 });
});
This code does not work for some reason. 由于某些原因，此代码无法正常工作。 Any ideas why the above code does not work? 有什么想法为什么上面的代码不起作用？
7 个解决方案
解决方案1
2 已采纳 2016-12-06 09:09:51
Firstly note that your issue is because the selector is incorrect. 首先请注意，您的问题是因为选择器不正确。 It should be $('#showLayers') not $('#showLayers img') - or even just $(this) as you're in the scope of the click handler. 应该是$('#showLayers')而不是$('#showLayers img') -甚至只是$(this)因为您属于点击处理程序的范围。
Secondly, note that you can improve the logic by using CSS for the animation and simply toggling the class in JS as needed: 其次，请注意，可以通过将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
1 2016-12-06 09:13:51
the .animate() method in jQuery accepts only integers as a value to a property so "180deg" is invalid instead create a class and toggle it 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>
解决方案3
1 2016-12-06 09:22:34
<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>
解决方案4
1 2016-12-06 09:25:22
Ok you can use the jquery css methods with rotate . 好吧，你可以使用jquery css与方法rotate 。 With a variable you increm, your pictures rotate at 360 deg (180 by 180). 使用递增的变量，图片将以360度（180 x 180）旋转。
Please try: 请试试：
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" />
解决方案5
0 2016-12-06 09:22:23
Try this code : 试试这个代码：
$('#showLayers').click( function() {
$('#showLayers img').css('transform', 'rotate(180deg)');
});
解决方案6
0 2016-12-06 09:25:29
There are many ways to do this. 有很多方法可以做到这一点。 Below is one of the way: 以下是一种方法：
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;
});
DEMO: https://jsfiddle.net/1464bgn2/ 演示： https : //jsfiddle.net/1464bgn2/
解决方案7
-1 2016-12-06 09:06:43
Change showLayers img to #showLayers . 将showLayers img更改为#showLayers 。
Also rotate: 180 isn't valid styling. 还要rotate: 180不是有效的样式。 See this answer for how to rotate a div. 有关如何旋转div的信息，请参见此答案 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.