Cross-browser jQuery Image Rotation Plugin - jqueryRotate
| File Size: | 43.6 KB |
|---|---|
| Views Total: | 2096 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
jqueryRotate is a lightweight, cross-browser jQuery plugin used to rotate an image to any angle using CSS3 transforms. With fallsbacks to CANVAS and/or VML (IE6) for old browsers which don't support CSS3 transform property.
How to use it:
1. Place the script jQueryRotate.js after jQuery library and the jqueryRotate is ready for use.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jQueryRotate.js"></script>
2. The JavaScript to rotate your image by a given angle.
$("img").rotate(180);
3. Add an animation to the image while rotating.
$("img").rotate({
angle: 0,
animateTo:180
});
4. Config the duration of the rotate animation.
$("img").rotate({
angle: 0,
animateTo:180,
duration:6000
});
5. Easing function is supported as well.
$("img").rotate({
angle: 0,
animateTo:180,
easing: function(){}
});
6. Execute a callback function when the animation is completely finished.
$("img").rotate({
angle: 0,
animateTo:180,
callback: function(){}
});
7. Get the current angle of rotated image.
$("img").rotate({
angle: 0,
animateTo:180,
callback: function(){
alert($(this).getRotateAngle());
}
});
8. Stop the rotate animation manually.
$("img").stopRotate();
This awesome jQuery plugin is developed by wilq32. For more Advanced Usages, please check the demo page or visit the official website.











