亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery旋轉插件jqueryrotate用法詳解

 更新時間：2016年10月13日 11:45:48   作者：天馬3798  
這篇文章主要介紹了jQuery旋轉插件jqueryrotate用法,結合實例形式詳細分析了jqueryrotate插件的功能、定義及相關參數(shù)的使用方法,需要的朋友可以參考下

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

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

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

兼容性

jqueryrotate 支持所有主流瀏覽器，包括 IE6。jqueryrotate 在高級瀏覽器中使用 CSS3 transform 屬性實現(xiàn)，在低版本 IE 中使用 VML 實現(xiàn)。當然，你可以使用 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
 });
});

參數(shù)

參數(shù) 類型 說明 默認值
angle 數(shù)字 旋轉一個角度 0
animateTo 數(shù)字 從當前的角度旋轉到多少度 0
step 函數(shù) 每個動畫步驟中執(zhí)行的回調函數(shù)，當前角度值作為該函數(shù)的第一個參數(shù) 無
easing 函數(shù) 自定義旋轉速度、旋轉效果，需要使用 jQuery.easing.js 無
duration 整數(shù) 旋轉持續(xù)時間，以毫秒為單位  
callback 函數(shù) 旋轉完成后的回調函數(shù) 無
getRotateAngle 函數(shù) 返回旋轉對象當前的角度 無
stopRotate 函數(shù) 停止旋轉 無

 

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

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

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

相關文章

最新評論