这是一款基于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