jQuery 旋轉插件 jqueryrotate 用法詳解

jqueryrotate 是可以實現 jQuery 旋轉效果的插件，它支持 Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高級瀏覽器下使用duTransform，低版本ie使用VML實現。

rotate() 方法:

屬性參數：

參數	類型	說明	默認值
angle	數字	旋轉一個角度	0
animateTo	數字	從當前的角度旋轉到多少度	0
step	函數	每個動畫步驟中執行的回調函數，當前角度值作為該函數的第一個參數	無
easing	函數	自定義旋轉速度、旋轉效果，需要使用 jQuery.easing.js	無
duration	整數	旋轉持續時間，以毫秒為單位
callback	函數	旋轉完成后的回調函數	無
getRotateAngle	函數	返回旋轉對象當前的角度	無
stopRotate	函數	停止旋轉	無

1.angle屬性：［Number］ – default 0 – 旋轉的角度數，並且立即執行

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

2.bind屬性：［Object］ 對象，包含綁定到一個旋轉對象的事件。事件內部的$（this）指向旋轉對象-這樣可以在內部鏈式調用- $（this）.rotate（…）。

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

3.animateTo屬性：［Number］ – default 0 – 從當前角度值動畫旋轉到給定的角度值 （或給定的角度參數）

4.duration屬性：［Number］ – 指定使用animateTo的動畫執行持續時間

$("#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 ; }

7.callback屬性：［Function］ 動畫完成時執行的回調函數

// 旋轉完成后彈出1
$("#img").rotate({
  bind:{
    click: function(){
      $(this).rotate({
        angle: 0,
        animateTo:180,
        callback: function(){ 
          alert(1)
        }
      })
    }
  }
});

8. getRotateAngle這個函數只是簡單地返回旋轉對象當前的角度。

// 旋轉完成后，點擊彈出當前角度45
$("#img").rotate({
  angle: 45,
  bind: {
    click : function(){
      alert($(this).getRotateAngle());
    }
  }
});

9.stopRotate這個函數只是簡單地停止正在進行的旋轉動畫。例如：

// 點擊旋轉180 延遲1秒停止旋轉
$("#img").rotate({
    bind: {
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo: 180,
                duration: 6000
            });
        setTimeout(function(){
            $("#img").stopRotate();
            }, 1000);
        }
    }
});

示例1：直接旋轉一個角度

$('#img1').rotate(45);  

// 或者

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

示例2：鼠標移動效果

$('#img2').rotate({   
    bind : {  
        mouseover : function(){  
            $(this).rotate({animateTo: 180});  
        }, mouseout : function(){  
            $(this).rotate({animateTo: 0});  
        }  
    }  
}); 

示例3：不停旋轉

var angle = 0;  
setInterval(function(){  
    angle +=3;  
    $('#img3').rotate(angle);  
}, 50);  

// 或者

var rotation = function (){  
    $('#img4').rotate({  
        angle: 0,   
        animateTo: 360,   
        callback: rotation  
    });  
}  
rotation();

// 或者

var rotation2 = function(){  
    $('#img5').rotate({  
        angle: 0,   
        animateTo: 360,   
        callback: rotation2,  
        easing: function(x,t,b,c,d){  
            return c*(t/d)+b;  
        }  
    });  
}  
rotation2();

示例4：點擊旋轉

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

// 或者

var value2 = 0;  
$('#img7').rotate({   
    bind: {  
        click: function(){  
            value2 +=90;  
            $(this).rotate({  
                animateTo: value2  
            });  
        }  
    }  
});