使用jquery进行图像旋转

Question

我似乎无法在我的网站上这样做......我所能做的只是隐藏元素！以下是代码at this JSFiddle。

的JavaScript

$("#image").rotate({ 
   bind: 
     { 
        mouseover : function() { 
            $(this).rotate({animateTo:180})
        },
        mouseout : function() { 
            $(this).rotate({animateTo:0})
        }
     } 

});

HTML

<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script>
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">

CSS

#image{
  margin:100px 100px;
}

这是怎么回事？

Answer 1

jQueryRotate是......它是一个jQuery插件 - 它意味着没有jQuery库它将无法工作。它包含在jsfiddle示例中（在左侧），但我想它并不那么明显:)插件本身应该适用于新版本的jQuery，但如果没有，请向问题提交该插件的作者，所以他可以解决它。

换句话说，在HTML中输入：

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

在包含jQueryRotate.js脚本之前它应该可行。干杯！

Answer 2

它对我有用。当我将鼠标悬停在它上面时，它会旋转直到光标不再在它下面，然后它会向后旋转。

通过将处理程序绑定到不会旋转的封闭框，您可能会获得更平滑的效果。