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

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

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

使用方法
在页面中引入jquery和jquery ui文件,以及jquery.ui.rotatable.css和jquery.ui.rotatable.js文件。

1
2
3
4
<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元素。

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

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来使该元素进行旋转。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(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:是否允许鼠标滚轮进行旋转。

文件信息:

    0

    发表评论