"jquery.rotate.min.js"是jQuery旋轉rotate插件，支持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］ 包含旋轉參數的對象。
支持的屬性：
1.angle屬性：［Number］ – default 0 – 旋轉的角度數，並且立即執行
例如：1$（“#img”）.rotate（{angle:45}）;
2.bind屬性：［Object］ 對象，包含綁定到一個旋轉對象的事件。事件內部的$（this）指向旋轉對象-這樣可以在內部鏈式調用- $（this）.rotate（…）。
例如 （click on arrow）：
$（“#img”）.rotate（{bind：{
click： function（）{
$（this）.rotate（{
angle： 0，
animateTo:180
}）
}
}
}）;
3.animateTo屬性：［Number］ – default 0 – 從當前角度值動畫旋轉到給定的角度值 （或給定的角度參數）
4.duration屬性：［Number］ – 指定使用animateTo的動畫執行持續時間
例如 （click on arrow）：
$("#img").rotate({
bind:({
click: function(){
$(this).rotate({
duration:9000,
angle:0,
animateTo:360
})
}
})
});
5. step屬性：［Function］ – 每個動畫步驟中執行的回調函數，當前角度值作為該函數的第一個參數
6. easing屬性：［Function］ – 默認 （see below）
默認：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 ; }
示例1:沒有效果，一直轉
$("#scImg").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return (t/d)*c ;
}
});
示例2: 默認的效果
$("#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 ;
}
});
示例3：
$（“#img”）.rotate（{bind：{
click： function（）{
$（this）.rotate（{
angle： 0，
animateTo:180，
easing： $.easing.easeInOutElastic
}）
}
}
}）;
7.callback屬性：［Function］ 動畫完成時執行的回調函數
例如
$（“#img”）.rotate（{bind：{
click： function（）{
$（this）.rotate（{
angle： 0，
animateTo:180，
callback： function（）{ alert（1） }
}）
}
}
}）;
8. getRotateAngle這個函數只是簡單地返回旋轉對象當前的角度。
例如：
$（“#img”）.rotate（{
angle： 45，
bind： {
click ： function（）{
alert（$（this）.getRotateAngle（））;
}
}
}）;
9.stopRotate這個函數只是簡單地停止正在進行的旋轉動畫。例如：
$（“#img”）.rotate（{
bind： {
click： function（）{
$（“#img”）.rotate（{
angle： 0，
animateTo： 180，
duration： 6000
}）;
setTimeout（function（）{
$（“#img”）.stopRotate（）;
}， 1000）;
}
}
}）;
最后送大家一個完整的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="iii" style="width:500px;height:400px;background:red;" class="iii">
<img src="images/0.jpg" name="imge1" class="ii" alt="" />
<img src="images/4.jpg" name="imge1" class="i" alt="" />
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
<script type="text/javascript">
$(".iii").mouseover(function(){
$(".ii").stop().rotate({animateTo:360});
$(".i").stop().rotate({angle:0,animateTo:360});
});
$(".iii").mouseout(function(){
$(".ii").stop().rotate({animateTo:0});
});
</script>
</body>
</html>