尝试使用jquery旋转图像
[英]Trying to make an image rotate using jquery
问题描述
I'm working on making an image rotate, and my console tells me that there are no errors with my javascripts, but the image doesn't rotate when I mouseover. 
我正在努力使图像旋转，我的控制台告诉我，我的javascripts没有错误，但鼠标悬停时图像不会旋转。 Here are the file contents: 这是文件内容：
under myjavascripts.js 在myjavascripts.js
$("#image").rotate({
bind:
{
mouseover : function() {
$(this).rotate({animateTo:180})
},
mouseout : function() {
$(this).rotate({animateTo:0})
}
}
});
and under my index.erb 并在我的index.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>
3 个解决方案
解决方案1
4 已采纳 2014-05-15 18:26:46
You need to wrap your code in document ready, because your image has to be loaded onto the page before the events get to register. 您需要在准备好文档中包装代码，因为在事件进行注册之前必须将图像加载到页面上。 $(function(){}) like this: $(function(){})是这样的：
$(function(){
$("#image").rotate({
bind:
{
mouseover : function() {
$(this).rotate({animateTo:180})
},
mouseout : function() {
$(this).rotate({animateTo:0})
}
}
});
});
解决方案2
3 2014-05-15 18:21:15
why using jquery while it can be done with some CSS3 为什么使用jquery可以用一些CSS3完成
CSS CSS
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
and on hover use this 并在悬停时使用此
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Then just attach the class “rotate” with any image or text to rotate it 360 degree. 然后将“旋转”类与任何图像或文本相关联，将其旋转360度。
Source : http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html 资料来源： http ： //blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html
解决方案3
1 2014-09-26 12:03:16
.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);
}
DEMO Growth pages DEMO 增长页面
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.