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