基于jquery ui的手动旋转元素插件

这是一款基于jquery ui的手动旋转元素插件 。它是对jquery ui插件的补充，添加了手动旋转元素的功能。

使用方法

在页面中引入jquery和jquery ui文件，以及jquery.ui.rotatable.css和jquery.ui.rotatable.js文件。

<link href="jquery.ui.rotatable.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.rotatable.js"></script>                 
                

HTML结构

在页面中放置一个空的div元素。

<div id="target" >旋转我</div>
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来使该元素进行旋转。

$(document).ready(function() {
    var params = {
        // Callback fired on rotation start.
        start: function(event, ui) {
        },
        // Callback fired during rotation.
        rotate: function(event, ui) {
        },
        // Callback fired on rotation end.
        stop: function(event, ui) {
        },
        // Set the rotation center
        rotationCenterOffset: {
            top: 20,
            left: 20
        },
        transforms: {
            translate: '(50%, 50%)',
            scale: '(2)'
            //any other transforms
        }
    };
    $('#target').rotatable(params);
});
                

配置参数

该基于jquery ui的手动旋转元素插件的可用配置参数有：

• angle：元素的开始角度。
• degrees：旋转的度数。
• handle：旋转的手柄的图片的url地址。
• handleOffset：手柄的位置，{top: 0, left: 0}。
• radians：使用radians作为旋转的度数。
• rotationCenterOffset：旋转的中心点位置，{top: 0, left: 0}。
• snap：是否启用step步长。
• step：按住shift键时，按指定的步长来旋转，默认为22.5度。
• start：回调函数。
• stop：回调函数。
• rotate：回调函数。
• transforms：在旋转元素上添加的CSS transforms。
• wheelRotate：是否允许鼠标滚轮进行旋转。

该基于jquery ui的手动旋转元素插件的github地址为：https://github.com/godswearhats/jquery-ui-rotatable