旋转功能无法正常发送每次或每次发送

时间:2016-04-12 10:37:45

标签: javascript jquery

我想每次发送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">

1 个答案:

答案 0 :(得分:0)

使用$("#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">