jquery旋转图像onclick

我试图实现这个（90度旋转），但它失败没有错误。 此图像位于标记内，其中已有切换jquery函数。

 <?php echo ""; ?> 

Answer 1

考虑一个jQuery扩展，例如： jQueryRotate

它将使onclick内部的旋转更容易，更易读。

Answer 2

根据您需要支持的浏览器版本，您可以尝试CSS转换。

首先，定义一个这样的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 */ } 

然后，您可以在单击链接时使用jQuery添加类：

Answer 3

在图像点击上使用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) */ }); }); 

Answer 4

结帐： JqueryRotate

这没有什么可做的，你可以在图像本身看到一个代码示例。

所以在你的情况下你可以这样做：

 $(document).ready(function(){ $('img[src^="down_arrow"]').click(function(){ $(this).rotate(90); }); }); 

Answer 5

这将使您能够执行每个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)' }); 

https://jsfiddle.net/Lnckq5om/1/

Answer 6

这是旋转图像90deg的示例，如下面的代码所示：

 $(document).ready(function(){ $("img").click(function(){ $(this).rotate(90); }); });