本文實例講述了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)。當(dāng)然，你可以使用 IE 條件注釋，低版本 IE 使用 jqueryrotate，高級瀏覽器則直接使用 CSS3。

使用方法

//演示1

//旋轉(zhuǎn)45angle

$(document.body).click(function () {

//方式1

$('.divOne').rotate(45);

//方式2

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

});

//演示2

//鼠標(biāo)移動效果

//方式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ù)

類型

說明

默認(rèn)值

angle

數(shù)字

旋轉(zhuǎn)一個角度

0

animateTo

數(shù)字

從當(dāng)前的角度旋轉(zhuǎn)到多少度

0

step

函數(shù)

每個動畫步驟中執(zhí)行的回調(diào)函數(shù)，當(dāng)前角度值作為該函數(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)對象當(dāng)前的角度

無

stopRotate

函數(shù)

停止旋轉(zhuǎn)

無

演示雖然使用的是圖片，但 jqueryrotate 并不只是能運用在圖片上，其他元素如 div 等也可以使用。同時，你可以發(fā)揮想象，制作出更多關(guān)于旋轉(zhuǎn)的特效。

希望本文所述對大家jQuery程序設(shè)計有所幫助。

總結(jié)

以上是生活随笔為你收集整理的java rotate怎么用_jQuery旋转插件jqueryrotate用法详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。