Javascript 尝试使用jquery使图像旋转_Javascript_Jquery_Html_Rotation

Javascript 尝试使用jquery使图像旋转

javascript jquery html

Javascript 尝试使用jquery使图像旋转,javascript,jquery,html,rotation,Javascript,Jquery,Html,Rotation,我正在制作一个图像旋转，我的控制台告诉我，我的javascripts没有错误，但是当我鼠标悬停时，图像不会旋转。以下是文件内容：在myjavascripts.js下 $("#image").rotate({ bind: { mouseover : function() { $(this).rotate({animateTo:180}) }, mouseout : function() {

我正在制作一个图像旋转，我的控制台告诉我，我的javascripts没有错误，但是当我鼠标悬停时，图像不会旋转。以下是文件内容：

在

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

    });

在我的索引下.erb

<head>
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script type="text/javascript" src="/javascripts/myjavascript.js"></script>
... 
<img border="0" src="/images/transparent_drapes.jpg" alt="drapes" width="" height="" id="image">
  </div>


... 
为什么要使用jquery，而它可以通过一些CSS3完成
CSS
悬停时用这个
.rotate:hover  
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

然后，只需将类“rotate”与任何图像或文本一起附加，即可将其旋转360度
来源：
您需要将代码包装到document ready中，因为必须在事件注册之前将图像加载到页面上<代码>$（函数（）{}）

如下：

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

  });
  });

演示

您是否已准备好在文档上执行此操作？你的图像必须加载才能正常工作，对吗？@AlexShilman我不知道你的意思是什么？我正在使用Sinatra并将图像加载到我的图像文件夹中。这回答了你的问题吗？这不是一个Ruby问题，所以我正在删除标记。我只是在练习我的jQuery，希望在没有CSS的情况下实现这一点，但我很感谢你的回答，可能以后会使用它。太棒了！这是第一部分做的（

$（function（）{

），还有一些其他的修改…你的回答让我觉得你不知道

$（function（）{}

做了什么。它相当于

$（document）.ready（function（）{}）；

。基本上，它是一个事件处理程序，在网页加载完所有资产和其他内容后触发。@co谷，这正是我的观点。图像是文档的一部分，所以当文档准备好时，即DOM，注册函数mouseover，rotate…我的答案中哪一部分给你留下了这样的印象？@AlexShilman抱歉，我对模数有反应。你的回答很好。是他的“这是第一部分做的”评论暗示他不知道它做了什么，只是它起作用了。

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

  });
  });

.rotate img {
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -ms-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.rotate img:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
 }