jQuery -旋转图像

Question

我试图创建图像旋转，但它不起作用。我从不同的网站尝试了不同的代码，但不知道哪里出了问题。

这是我的代码。

​

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="" />

​

Answer 1

在您的示例中，未定义jQuery，请检查以下代码：

​

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="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="" />

​