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

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

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

兼容性

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

使用方法

//演示1

//旋轉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 不停旋轉

//方式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 點擊旋轉

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

});

});

參數

參數

類型

說明

默認值

angle

數字

旋轉一個角度

0

animateTo

數字

從當前的角度旋轉到多少度

0

step

函數

每個動畫步驟中執行的回調函數，當前角度值作為該函數的第一個參數

無

easing

函數

自定義旋轉速度、旋轉效果，需要使用 jQuery.easing.js

無

duration

整數

旋轉持續時間，以毫秒為單位

callback

函數

旋轉完成后的回調函數

無

getRotateAngle

函數

返回旋轉對象當前的角度

無

stopRotate

函數

停止旋轉

無

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。