DIV CSS 佈局教程網

本文實例講述了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相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

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