旋转函数在每次发送或一次发送时都不能很好地工作

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库包含到代码中，因为您使用的脚本是基于它的。看下面的片段。

另外，为了使旋转按钮每次都能工作，我将degree变量声明移到函数之外，这样它就不会每次调用函数时都重置。然后，每次调用函数时，我都会向它添加值deg，从而相应地增加角度。

​

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

​