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

2019-11-20 08:45:33

字體：大中小

供稿：網(wǎng)友

本文實(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)//方式1var angle = 0;setInterval(function () { angle += 3; $('.divOne').rotate(angle);}, 50);//方式2var rotation = function () { $('.divOne').rotate({ angle: 0, animateTo: 360, callback:rotation })}rotation();//方式3var 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ù)	類型	說(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ú)