jQueryrotate 如何通过光标旋转超过 1 个图像答案

【问题标题】：jQueryrotate How to rotate more than 1 image by a cursorjQueryrotate 如何通过光标旋转超过 1 个图像
【发布时间】：2017-09-25 05:34:59
【问题描述】：

我正在尝试 jqueryrotate 插件，并通过光标简单地旋转给定的图像。有用但我的问题是当我使用 2 张具有相同 ID 类的图像时旋转仅在第一张图像上起作用，如何使其单独工作

http://jsfiddle.nXt/8xwqdk71/

我将用于许多图像。

【问题讨论】：

标签： jquery-rotate

【解决方案1】：

您不能有两个或多个具有相同id 的对象/元素。修改您的代码以改为以类为目标。

<img src="https://www.google.com/images/srpr/logo3w.png" class="image">

var value = 0
$(".image").rotate({ 
   bind: 
     { 
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
     } 
});

.image{
  margin:100px 100px;
}

编辑：此外，您需要有一个并非在所有图像之间全局共享的旋转值。当您有多个图像时，以上内容将为您提供一些有趣的旋转效果。

更新版本位于：http://jsfiddle.net/0nwvt303/

<img src="https://www.google.com/images/srpr/logo3w.png" class="image" rotation=0>
<img src="https://www.google.com/images/srpr/logo3w.png" class="image" rotation=0>

$(".image").rotate({ 
   bind: 
     { 
        click: function(){
            currRotation = ($(this).attr("rotation") * 1) + 90;
            $(this).attr("rotation", currRotation);
            $(this).rotate({ animateTo:currRotation });
        }
     } 
});

【讨论】：