快捷導航

jQuery旋轉(zhuǎn)插件jqueryrotate用法詳解

更新時間：2016年10月13日 11:45:48 作者：天馬3798

這篇文章主要介紹了jQuery旋轉(zhuǎn)插件jqueryrotate用法,結(jié)合實例形式詳細分析了jqueryrotate插件的功能、定義及相關(guān)參數(shù)的使用方法,需要的朋友可以參考下

本文實例講述了jQuery旋轉(zhuǎn)插件jqueryrotate用法。分享給大家供大家參考，具體如下：

CSS3 提供了多種變形效果，比如矩陣變形、位移、縮放、旋轉(zhuǎn)和傾斜等等，讓頁面更加生動活潑有趣，不再一動不動。然后 IE10 以下版本的瀏覽器不支持 CSS3 變形，雖然 IE 有私有屬性濾鏡（filter），但不全面，而且效果和性能都不好。

今天介紹一款 jQuery 插件——jqueryrotate，它可以實現(xiàn)旋轉(zhuǎn)效果。jqueryrotate 支持所有主流瀏覽器，包括 IE6。如果你想在低版本的 IE 中實現(xiàn)旋轉(zhuǎn)效果，那么 jqueryrotate 是一個很好的選擇。

兼容性

jqueryrotate 支持所有主流瀏覽器，包括 IE6。jqueryrotate 在高級瀏覽器中使用 CSS3 transform 屬性實現(xiàn)，在低版本 IE 中使用 VML 實現(xiàn)。當然，你可以使用 IE 條件注釋，低版本 IE 使用 jqueryrotate，高級瀏覽器則直接使用 CSS3。

使用方法

//演示1
//旋轉(zhuǎn)45angle
$(document.body).click(function () {
 //方式1
 $('.divOne').rotate(45);
 //方式2
 $('.divOne').rotate({ angle: 45 });
});

//演示2
//鼠標移動效果
//方式1
$('.divOne').rotate({
 bind: {
 mouseover: function () {
  $(this).rotate({ animateTo: 180 });
 },
 mouseout: function () {
  $(this).rotate({ animateTo: 0 });
 }
 }
});
//方式2
$('.divOne').mouseover(function () {
 $(this).rotate({ animateTo: 180 });
}).mouseout(function () {
 $(this).rotate({animateTo:0});
});

//演示3 不停旋轉(zhuǎn)
//方式1
var angle = 0;
setInterval(function () {
 angle += 3;
 $('.divOne').rotate(angle);
}, 50);
//方式2
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback:rotation
 })
}
rotation();
//方式3
var rotation = function () {
 $('.divOne').rotate({
 angle: 0,
 animateTo: 360,
 callback: rotation,
 easing: function (x, t, b, c, d) {
  return c * (t / d) + b;
 }
 })
}
rotation();

//演示4 點擊旋轉(zhuǎn)
//方式1
$('.divOne').click(function () {
 $(this).rotate({
 angle: 0,
 animateTo: 180,
 easing: $.easing.easeInOutExpo
 });
});
var val = 0;
$('.divOne').click(function () {
 val += 90;
 $(this).rotate({
 animateTo: val
 });
});

參數(shù)

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