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

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

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

兼容性

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

使用方法

//演示1

//旋轉(zhuǎn)45angle

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

//方式1

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

//方式2

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

});

//演示2

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

//方式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 點(diǎn)擊旋轉(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ù)

類(lèi)型

說(shuō)明

默認(rèn)值

angle

數(shù)字

旋轉(zhuǎn)一個(gè)角度

0

animateTo

數(shù)字

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

0

step

函數(shù)

每個(gè)動(dòng)畫(huà)步驟中執(zhí)行的回調(diào)函數(shù)，當(dāng)前角度值作為該函數(shù)的第一個(gè)參數(shù)

無(wú)

easing

函數(shù)

自定義旋轉(zhuǎn)速度、旋轉(zhuǎn)效果，需要使用 jQuery.easing.js

無(wú)

duration

整數(shù)

旋轉(zhuǎn)持續(xù)時(shí)間，以毫秒為單位

callback

函數(shù)

旋轉(zhuǎn)完成后的回調(diào)函數(shù)

無(wú)

getRotateAngle

函數(shù)

返回旋轉(zhuǎn)對(duì)象當(dāng)前的角度

無(wú)

stopRotate

函數(shù)

停止旋轉(zhuǎn)

無(wú)

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

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

總結(jié)

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

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