jQuery - 旋转图像

时间:2016-02-14 07:48:55

标签: javascript jquery jquery-rotate

我尝试创建图片旋转,但它不起作用。我尝试了不同网站的不同代码,但不知道错误。

这是我的代码。



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

#image{
  margin:200px 200px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.sobekrepository.org/includes/jquery-rotate/2.2/jquery-rotate.min.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://jqueryrotate.com/images/chrome_32x32.png" id="image" onclick="" />
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

在您的示例中,未定义var value = 0 $("#image").rotate({ bind: { click: function() { value += 90; $(this).rotate({ animateTo: value }) } } });,请检查以下代码:

&#13;
&#13;
#image {
  margin: 200px 200px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="include/jQueryRotate.js"></script>
<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<img src="http://i.forbesimg.com/media/lists/companies/apple_416x416.jpg" id="image" onclick="" />
&#13;
conditions = units.map do |unit_params|
  condition = unit_params.map do |k, v|
    "#{k} = '#{v}'" if k != :count
  end.compact.join(' AND ')
  "(#{condition})"
end.join(' OR ')

# conditions = "(name = 'barbarian' AND level = '5') OR (name = 'archer' AND level = '6')"

Unit.where(conditions)
&#13;
&#13;
&#13;