javascript - 每次或一次发送时旋转功能无法正常工作

Question

我想每次发送 10 度以将其向右或向左旋转，但它从不旋转。我想在每个浏览器中旋转它。我错过了什么？

<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>
<script>
function rotate(deg){
        var degree = deg;
        document.getElementById("image").rotate({ angle:0+degree,animateTo:+degree,easing: $.easing.easeInOutExpo }); 
}
</script>

<input type="submit" name="submit" id="submit" value="Rotate" onClick="rotate('10')">
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">

Answer 1

使用 $("#image") 并且不要忘记将 jQuery 库包含到您的代码中，因为您使用的脚本基于它。请参阅下面的代码片段。

此外，为了使旋转按钮每次都能工作，我将您的 level 变量声明移到了函数外部，这样每次调用函数时它就不会重置。然后，每次调用该函数时，我都会向其添加值 deg，从而相应地增加 Angular 。

var degree = 0;
function rotate(deg){
        degree += deg;
        $("#image").rotate({ angle:0+degree,animateTo:+degree,easing: $.easing.easeInOutExpo }); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>

<input type="submit" name="submit" id="submit" value="Rotate" onClick="rotate(10)">
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">