javascript 通过单击按钮旋转图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17646729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate images by clicking a button
提问by Bharu
I want to rotate an image 90 degrees, 180 degrees and 360 degrees on button click.
我想在单击按钮时将图像旋转 90 度、180 度和 360 度。
<img class="test" id="image" src="images/image" alt="This is the Display Image" />
I have used this script and I don't liked it because it just displays one single rotation...
我使用过这个脚本，但我不喜欢它，因为它只显示一个旋转...
$(document).ready(function() {
$('#image').rotate({maxAngle:25,minAngle:-55,
bind: [
{"mouseover":function(){$(this).rotateAnimation(85); } },
{"mouseout":function(){$(this).rotateAnimation(-35); } }
]
});
});
回答by Seth McClaine
$('input').click(function(){
var img = $('img');
if(img.hasClass('north')){
img.attr('class','west');
} else if(img.hasClass('west')){
img.attr('class','south');
} else if(img.hasClass('south')){
img.attr('class','east');
} else if(img.hasClass('east')){
img.attr('class','north');
}
});
Fiddle: http://jsfiddle.net/JkHqa/
小提琴：http: //jsfiddle.net/JkHqa/
** Look at the JQuery animate function if you want to incorporate animation
** 如果要合并动画，请查看 JQuery animate 函数
回答by Sonu Sindhu
Try this I hope it will help.
试试这个我希望它会有所帮助。
HTML
HTML
<img class="test" id="image" src="http://fbhunt.com/images/FBHUNT200.png" alt="This is the Display Image" />
<input type="button" value="click" id="clickme">
JS
JS
$(document).ready(function() {
$(document).on('click','#clickme',function(){
$("#image").css({'transform': 'rotate(90deg)'});
});
});
回答by Hitesh
Try this one. http://code.google.com/p/jqueryrotate/I hope this will help you.
试试这个。http://code.google.com/p/jqueryrotate/我希望这会帮助你。
回答by user2216267
Alternatively, you can use CSS 3 also to achieve the same goal
或者，您也可以使用 CSS 3 来实现相同的目标
#div:focus
{
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
