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

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

参数

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

实现的效果:

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           })       }   } )};