jQuery.rotate.js(控制图片转动)
jQuery.rotate.js笔记
1. jQuery.rotate.js是什么
一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画。
这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转其它元素在一些低版本浏览器可能出现兼容器问题。所以应该尽量只用在旋转img元素上。
2. jQuery.rotate.js怎么用
2.1 接口
总共提供了四个方法:
rorate(angle);
rorate(parameters);
getRorateAngle();
stopRotate();
2.1.1 rorate(angle);
传入一个角度,会直接将元素旋转到对应的角度,并不会有动画:
$("#foo").rotate(15);
效果:
2.1.2 rorate(parameters);
支持的参数:
参数名 | 类型 | 说明 |
angle | Number | 旋转到指定的角度,不带动画,默认是0 |
animateTo | Number | 旋转到指定的角度,使用动画 |
bind | Object | 可以传入一个对象,作为事件绑定到元素上。 |
center | Array | 用来设定旋转的中心,传入的数组是[X,Y]格式的,可以使用数值[100,100]或者百分比[“50%”,“50%”],默认是以元素的中心点旋转 |
duration | Number | 指定动画的持续时间,默认是1000毫秒 |
step | Function | 传入一个回调函数在动画的每一步都会调用一下 |
easing | Function | 让动画看起来更自然,感觉用不到,而且本人对图形学没啥研究,感兴趣的官网有详细描述,就不再深究了…. |
callback | Function | 当动画完成时的回调函数。 |
关于bind的想法:
jQuery已经为我们提供了很健全的事件绑定接口了,为啥这里还提供bind呢?
猜想可能是为了将同义操作统一化。
Demo : 一个简单的例子(倾斜的图画在鼠标移上去的时候摆正,离开的时候又恢复原样):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align:center; } #foo{ width:300px; height:200px; margin-top:100px; } </style> </head> <body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#foo").rotate({ angle:15, bind:{ mouseover:function(){ $(this).rotate({ animateTo:0 }); }, mouseout:function(){ $(this).rotate({ animateTo:15 }); } } }); }); </script> </body> </html>
效果:
Demo:center的使用
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align:center; } #foo{ width:200px; height:130px; margin-top:100px; } </style> </head> <body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#foo").rotate({ bind:{ click:function(){ $(this).rotate({ center:["0","100%"], animateTo:90 }); } } }); }); </script> </body> </html>
效果:
2.1.3 getRorateAngle();
获取元素当前旋转的角度
$(document).ready(function(){ $("#foo").rotate({ angle:15, bind:{ click:function(){ console.log($(this).getRotateAngle()); } } }); });
2.1.4 stopRotate();
停止元素的旋转。
一个小例子,元素不断的匀速旋转,单击时停止旋转:
$(document).ready(function(){ var rotate=function(){ $("#foo").rotate({ angle:0, animateTo:360, duration:5000, callback:rotate, easing: function (x,t,b,c,d){ return c*(t/d)+b; }, bind:{ click:function(){ $(this).stopRotate(); } } }); } rotate(); });
效果:
另一种实现元素不断旋转的方法:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align:center; } #foo{ width:300px; height:200px; margin-top:100px; } </style> </head> <body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jQueryRotate.js"></script> <script type="text/javascript"> $(document).ready(function(){ var angle=0; var rotate=function(){ angle=angle+10; $("#foo").rotate({ animateTo:angle, duration:100 }) } setInterval(rotate,100); }); </script> </body> </html>
效果并不是特别理想,感觉有些卡顿。
3. 总结
1. jQuery.rotate适合对img元素进行旋转操作。
2. 可以设置动画过渡,可以设置过渡的时间。
3. 可以设置完成回调函数。
4. 可以自定义旋转中心。
5. 可以设置动画曲线。
6. 编不出了…
参考资料:
1. 官网 http://jqueryrotate.com/