本文實(shí)例講述了jQuery旋轉(zhuǎn)插件jqueryrotate用法。分享給大家供大家參考，具體如下：
公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出輝縣免費(fèi)做網(wǎng)站回饋大家。
CSS3
提供了多種變形效果，比如矩陣變形、位移、縮放、旋轉(zhuǎn)和傾斜等等，讓頁面更加生動(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:
});
}
}
});
//方式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ù)
類型
說明
默認(rèn)值
angle
數(shù)字
旋轉(zhuǎn)一個(gè)角度
animateTo
數(shù)字
從當(dāng)前的角度旋轉(zhuǎn)到多少度
step
函數(shù)
每個(gè)動(dòng)畫步驟中執(zhí)行的回調(diào)函數(shù)，當(dāng)前角度值作為該函數(shù)的第一個(gè)參數(shù)
無
easing
函數(shù)
自定義旋轉(zhuǎn)速度、旋轉(zhuǎn)效果，需要使用
jQuery.easing.js
無
duration
整數(shù)
旋轉(zhuǎn)持續(xù)時(shí)間，以毫秒為單位
callback
函數(shù)
旋轉(zhuǎn)完成后的回調(diào)函數(shù)
無
getRotateAngle
函數(shù)
返回旋轉(zhuǎn)對(duì)象當(dāng)前的角度
無
stopRotate
函數(shù)
停止旋轉(zhuǎn)
無
演示雖然使用的是圖片，但
jqueryrotate
并不只是能運(yùn)用在圖片上，其他元素如
div
等也可以使用。同時(shí)，你可以發(fā)揮想象，制作出更多關(guān)于旋轉(zhuǎn)的特效。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
jQuery Feature Carousel 插件是國(guó)外的一比較優(yōu)秀的旋轉(zhuǎn)木馬圖片插件。
插件特點(diǎn)：
1. 處理div的3d旋轉(zhuǎn)木馬效果。
2. 支持一個(gè)中心，2個(gè)側(cè)面的功能
3.中心區(qū)域可點(diǎn)擊
4.顯示隱藏文本功能（可以使用css顯示在圖片的任何位置）
5.可以修改速度，效果，等很多的參數(shù)。
6.支持 Chrome,FireFox,Safari和IE6 +瀏覽器。
7.需要 jQuery v1.3+
8.支持圖片預(yù)加載
JQ我以前好像在哪看到過案例，但忘了找不到了。Swiper可以，輕量級(jí)插件，功能卻很強(qiáng)大，移動(dòng)PC都能用。
js和jquery做不到的，首先這個(gè)是css3中的3d轉(zhuǎn)換，用到transform：rotateX(50deg)?，只不過是旋轉(zhuǎn)中心要在你畫的線中間，設(shè)置transform-origin:50%?0;?（這里是xy軸，可以理解為集合第四項(xiàng)現(xiàn)，所以旋轉(zhuǎn)軸所在位置就是紅色箭頭位置的坐標(biāo)，x和-y）
整理代碼：
div{?width:500px;?height:500px;?background:#333;?transform-origin:50%?0;?transform:rotateX(50deg);
如有疑問歡迎咨詢
旋轉(zhuǎn)效果有2d旋轉(zhuǎn)、3D旋轉(zhuǎn).你可以baidu搜索下css3 Transform ，就可以實(shí)現(xiàn)
放大效果：可以通過jquery animate方法改變圖片的width，height屬性實(shí)現(xiàn)。如：$("p").animate({
width:"500px",height:"500px"
}, "normal");
重慶分公司
重慶分公司
