jQuery旋转插件—rotate详细说明文档

By:0x584A Date:2015年10月19日 21:10:27

参数

参数	类型	说明	默认值
angle	数字	旋转一个角度	0
animateTo	数字	从当前的角度旋转到多少度	0
step	函数	每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数	无
easing	函数	自定义旋转速度、旋转效果，需要使用 jQuery.easing.js	无
duration	整数	旋转持续时间，以毫秒为单位	无
callback	函数	旋转完成后的回调函数	无
getRotateAngle	函数	返回旋转对象当前的角度	无
stopRotate	函数	停止旋转	无

实现的效果：

1.gif

jQuery旋转插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现。调用和方法：

rotate(angle)angle参数：[Number] – 默认为 0 –

根据给定的角度旋转图片例如：

$('#img').rotate(45);或 $('#img').rotate({angle:45})

rotate（parameters）parameters参数：［Object］ 包含旋转参数的对象。

支持的属性：

• .angle属性：［Number］ – default 0 – 旋转的角度数，并且立即执行

例如：

$("#img").rotate({angle:45});

---

• .bind属性：［Object］ 对象，包含绑定到一个旋转对象的事件。事件内部的$（this）指向旋转对象-这样你可以在内部链式调用- $（this）.rotate（…）。例如
  (click on arrow)：

$('#img').rotate({
    bind:{
    click: function(){
            $(this).rotate({
                angle: 0,
                animateTo:180
            })
        }
    }
});

---

• .animateTo属性：［Number］ – default 0 – 从当前角度值动画旋转到给定的角度值 （或给定的角度参数）

---

• .duration属性：［Number］ – 指定使用animateTo的动画执行持续时间例如 （click on arrow）：

$("#img").rotate({
    bind:{
        click:function(){
            $(this).rotate({
                duration:6000,
                angle: 0,
                animateTo:100
            })
        }
    }
});

---

• .step属性：［Function］ – 每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数

---

• .easing属性：［Function］ – 默认 （see below）– 自定义旋转速度、旋转效果，需要使用 jQuery.easing.js – Easing function used to make animation look more natural. It takes five parameters （x，t，b，c，d） to support easing from http://gsgd.co.uk/sandbox/jquery/easing/ （for more details please see documentation at their website）。 Remember to include easing plugin before using it in jQueryRotate！

默认：

function (x, t, b, c, d) {
        return -c * ( (t=t/d-1)*t*t*t - 1) + b);
    }

Where:

t： current time，

b： begInnIng value，

c： change In value，

d： duration，

x： unused

没有渐变：No easing （linear easing）：

function(x, t, b, c, d) {
        return (t/d)*c ;
}

Example1:没有效果，一直转

 $("#scImg").rotate({
    angle:0,
    animateTo:360,
    callback: rotation,
    easing: function (x,t,b,c,d){
            return (t/d)*c ;
    }
});

Example2: 默认的效果

$("#scImg").rotate({
    angle:0,
    animateTo:360,
    callback: rotation,
    easing: function (x,t,b,c,d){
        return -c*( (t=t/d-1)*t*t*t-1)+b ;
        }
    });

Example3：

$("#img").rotate({
    bind:{
        click:function(){
            $(this).rotate({
                angle: 0,
                animateTo:180,
                easing: $.easing.easeInOutElastic
            })
        }
    }
});

---

• .callback属性：［Function］ 动画完成时执行的回调函数例如

$("#img").rotate({
    bind:{
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo:180,
                callback: function(){
                    alert(1)
                    }
                })
        }
    }
});

---

• .getRotateAngle这个函数只是简单地返回旋转对象当前的角度。

例如：

$("#img").rotate({
    angle: 45,
    bind: {
        click : function(){
            alert($(this).getRotateAngle());
        }
    }
});

---

• .stopRotate这个函数只是简单地停止正在进行的旋转动画。例如：

$("#img").rotate({
    bind: {
        click: function(){
            $("#img").rotate({
                angle: 0,
                animateTo: 180,
                duration: 6000
            })
        }
    }
)};