jquery 旋转图像 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14365449/
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
jquery rotate image onclick
提问by Art Planteur
I am trying to achieve this (90 degree rotation), but it fails without errors.
This image is within a <a></a>TAG where it has already a toggle jquery function.
我正在尝试实现这一点（旋转 90 度），但它失败而没有错误。此图像位于<a></a>已具有切换 jquery 功能的TAG内。
<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>
采纳答案by Jonathon Cwik
Consider a jQuery extension such as: jQueryRotate
考虑一个 jQuery 扩展，例如：jQueryRotate
It'll make the rotating inside the onclick much easier and more readable.
它将使 onclick 内部的旋转更容易和更具可读性。
回答by Tom van Enckevort
Depending on which browser versions you need to support, you could try CSS tranforms.
根据您需要支持的浏览器版本，您可以尝试 CSS 转换。
First, define a CSS class like this:
首先，像这样定义一个 CSS 类：
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
}
And then you can use jQuery to add the class when clicking the link:
然后您可以在单击链接时使用 jQuery 添加类：
<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />
回答by Varinder Singh
Use a combination of css rules -webkit-transformand -moz-transformon image click.For example to rotate image by 90 degree apply following css rules on click
使用 css 规则-webkit-transform和-moz-transform图像单击的组合。例如，将图像旋转 90 度，在单击时应用以下 css 规则
$('img').click(function(){
$(this).css({
"-webkit-transform": "rotate(90deg)",
"-moz-transform": "rotate(90deg)",
"transform": "rotate(90deg)" /* For modern browsers(CSS3) */
});
});
回答by Jai
checkout this: JqueryRotate
结帐： JqueryRotate
this have little things to do, you can see one code example in the image itself.
这没什么可做的，您可以在图像本身中看到一个代码示例。
So in your case you can do this:
所以在你的情况下，你可以这样做：
$(document).ready(function(){
$('img[src^="down_arrow"]').click(function(){
$(this).rotate(90);
});
});
回答by Rossitten
This will enable you to perform an additional rotation of each clik
这将使您能够对每个点击执行额外的旋转
var degrees = 0;
$('.img').click(function rotateMe(e) {
degrees += 90;
//$('.img').addClass('rotated'); // for one time rotation
$('.img').css({
'transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-o-transform': 'rotate(' + degrees + 'deg)'
});
});
回答by Manoj A
This is the example to rotate image 90deg as following code bellow:
这是将图像旋转 90 度的示例，如下代码所示：
$(document).ready(function(){
$("img").click(function(){
$(this).rotate(90);
});
});
