2017-09-25 47 views
0

我正在尝试jqueryrotate插件,只需旋转指定的图像的游标。它的工作原理 但我的问题是,当我用2个图像用相同的ID类 仅旋转在第一图像的工作,怎么办使它工作分别jQueryrotate如何通过光标旋转多个图像

http://jsfiddle.nXt/8xwqdk71/ 

我将使用许多图像。

回答

0

不能有两个或更多对象/元素具有相同的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 }); 
     } 
    } 
});