jQuery Plugin For Rotating Html Elements - multirotation
File Size: | 221KB |
---|---|
Views Total: | 5449 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
multirotation is a simple jQuery plugin that allows to rotate any html elements by a given angle and direction.
Basic Usage:
1. Include jQuery library and jQuery multirotation on the web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.multirotation-1.0.0.js"></script>
2. Create some buttons for controlling the rotation
<input title="+45 deg" type="button" onclick="return plus('#img_test');" value="+rotate"/> <input title="-45 deg" type="button" onclick="return minus('#img_test');" value="-rotate"/> <input title="set to 0 deg" type="button" onclick="return reset('#img_test');" value="reset"/>
3. The HTML
<div id="img_test" class="rotable"><img alt="" src="1.png" /></div>
4. The javascript
<script type="text/javascript"> function plus(id) { $(id).rotate({ angle: 45 }); get(id); return false; } function minus(id) { $(id).rotate({ angle: 90, direction: false }); get(id); return false; } function reset(id) { $(id).clearRotation(); get(id); return false; } </script>
This awesome jQuery plugin is developed by mandreoli. For more Advanced Usages, please check the demo page or visit the official website.