jQuery旋轉插件jqueryrotate用法詳解

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

公司主營業(yè)務：成都網(wǎng)站設計、網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出輝縣免費做網(wǎng)站回饋大家。

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:

});

}

}

});

//方式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ù)字

旋轉一個角度

animateTo

數(shù)字

從當前的角度旋轉到多少度

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

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

jquery.featurecarousel.js是什么插件

jQuery Feature Carousel 插件是國外的一比較優(yōu)秀的旋轉木馬圖片插件。

插件特點：

1. 處理div的3d旋轉木馬效果。

2. 支持一個中心，2個側面的功能

3.中心區(qū)域可點擊

4.顯示隱藏文本功能（可以使用css顯示在圖片的任何位置）

5.可以修改速度，效果，等很多的參數(shù)。

6.支持 Chrome,FireFox,Safari和IE6 +瀏覽器。

7.需要 jQuery v1.3+

8.支持圖片預加載

怎么用jquery實現(xiàn)圖片或者div自動3d翻轉

JQ我以前好像在哪看到過案例，但忘了找不到了。Swiper可以，輕量級插件，功能卻很強大，移動PC都能用。

用JS或jquery或CSS3做到旋轉。。

js和jquery做不到的，首先這個是css3中的3d轉換，用到transform：rotateX(50deg)?，只不過是旋轉中心要在你畫的線中間，設置transform-origin:50%?0;?（這里是xy軸，可以理解為集合第四項現(xiàn)，所以旋轉軸所在位置就是紅色箭頭位置的坐標，x和-y）

整理代碼：

div{?width:500px;?height:500px;?background:#333;?transform-origin:50%?0;?transform:rotateX(50deg);

如有疑問歡迎咨詢

jquery如何同時實現(xiàn)旋轉,與局部放大

旋轉效果有2d旋轉、3D旋轉.你可以baidu搜索下css3 Transform ，就可以實現(xiàn)

放大效果：可以通過jquery animate方法改變圖片的width，height屬性實現(xiàn)。如：$("p").animate({

width:"500px",height:"500px"

}, "normal");

新聞標題：jquery3d旋轉,jquery3d旋轉輪播圖 列表
本文鏈接：http://sd-ha.com/article6/dsespig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、移動網(wǎng)站建設、App設計、網(wǎng)站排名、搜索引擎優(yōu)化、網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)