TA貢獻1780條經驗 獲得超4個贊
rotate是jQuery旋轉rotate插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高級瀏覽器下使用Transform，低版本ie使用VML實現。 rotate（angle）angle參數：［Number］ – 默認為 0
<pre t="code" l="java">根據給定的角度旋轉圖片例如：
$（“#img”）.rotate（45）;或 $(‘#img’).rotate({angle:45})rotate（parameters）parameters參數：［Object］ 包含旋轉參數的對象。支持的屬性：1.angle屬性：［Number］ – default 0 – 旋轉的角度數，并且立即執行<pre t="code" l="js">例如：1$（“#img”）.rotate（{angle:45}）;2.bind屬性：［Object］ 對象，包含綁定到一個旋轉對象的事件。事件內部的$（this）指向旋轉對象-這樣可以在內部鏈式調用- $（this）.rotate（…）。<pre t="code" l="js">例如 （click on arrow）：
$（“#img”）.rotate（{bind：{
click： function（）{
$（this）.rotate（{
angle： 0，
animateTo:180
}）
}
}
}）;3.animateTo屬性：［Number］ – default 0 – 從當前角度值動畫旋轉到給定的角度值 （或給定的角度參數）
4.duration屬性：［Number］ – 指定使用animateTo的動畫執行持續時間<pre t="code" l="js">例如 （click on arrow）：
$（“#img”）.rotate（{bind：{
click： function（）{
$（this）.rotate（{
duration:6000，
angle： 0，
animateTo:100
}）
}
}
}）;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 ; } <pre t="code" l="js">示例1:沒有效果，一直轉
$("#scImg").rotate({
angle:0,
animateTo:360,
callback: rotation,
easing: function (x,t,b,c,d){
return (t/d)*c ;
}
}); <pre t="code" l="js">示例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 ;
}
});<pre t="code" l="js">示例3：
$（“#img”）.rotate（{bind：{
click： function（）{
$（this）.rotate（{
angle： 0，
animateTo:180，
easing： $.easing.easeInOutElastic
}）
}
}
}）;
7.callback屬性：［Function］ 動畫完成時執行的回調函數例如<pre t="code" l="js">$（“#img”）.rotate（{bind：{
click： function（）{
$（this）.rotate（{
angle： 0，
animateTo:180，
callback： function（）{ alert（1） }
}）
}
}
}）;8. getRotateAngle這個函數只是簡單地返回旋轉對象當前的角度。<pre t="code" l="js">例如：
$（“#img”）.rotate（{
angle： 45，
bind： {
click ： function（）{
alert（$（this）.getRotateAngle（））;
}
}
}）;9.stopRotate這個函數只是簡單地停止正在進行的旋轉動畫。例如：<pre t="code" l="js">$（“#img”）.rotate（{
bind： {
click： function（）{
$（“#img”）.rotate（{
angle： 0，
animateTo： 180，
duration： 6000
}）;
setTimeout（function（）{
$（“#img”）.stopRotate（）;
}， 1000）;
}
}
}）;
舉報