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