jQuery旋轉插件jqueryrotate用法詳解

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

創(chuàng)新互聯(lián)公司主營龍江網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,成都app軟件開發(fā)公司,龍江h(huán)5微信小程序開發(fā)搭建,龍江網(wǎng)站營銷推廣歡迎龍江等地區(qū)企業(yè)咨詢

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圖片旋轉問題

$("#cao").rotate(i);這里rotate方法是什么？jquery沒有這個方法吧。

img src="a.png" /

$(function () {

var degrees = 0;

var $elie = $("img");

function rotate() {

++degrees;

if (degrees 360) {

degrees = 0;

}

$elie.css({

'-webkit-transform': 'rotate(' + degrees + 'deg)',

'-moz-transform': 'rotate(' + degrees + 'deg)',

'-ms-transform': 'rotate(' + degrees + 'deg)',

'-o-transform': 'rotate(' + degrees + 'deg)',

'transform': 'rotate(' + degrees + 'deg)'

});

setTimeout(rotate, 50);

}

rotate($elie, 45);

});

我想用jquery實現(xiàn)一個圖片旋轉，寫了下面的簡單代碼，哪里不對啊？

你沒有引入jq插件。

jq本身沒有rotate方法，，你要引入jquery.rotate.min.js

jquery 讓圖片旋轉30度怎么寫啊

用jquery 給圖片添加css樣式，用css樣式來控制旋轉：

CSS3 transform 屬性

transform具體的用法去百度吧 ，手冊里解釋很全面

jQuery圖片旋轉插件jQueryRotate.js用法實例(附demo下載)

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

推薦一個圖片旋轉插件，用于瀏覽相冊時，旋轉圖片。

運行效果截圖如下：

點擊此處查看在線演示效果。

具體代碼如下：

script

type="text/javascript"

$(document).ready(function

()

{

$("#images").rotate(45);

var

value

=

$("#images1").rotate({

bind:

{

mouseover:

function(){

value

+=90;

$(this).rotate({

animateTo:value})

}

}

});

$('#button').click(function(){

$("#images1").rotate({animateTo:parseInt($('#angel').val())});

});

function

rotation

(){

$("#images2").rotate({

angle:0,

animateTo:360,

callback:

rotation,

easing:

function

(x,t,b,c,d){

return

c*(t/d)+b;

}

});

}

rotation();

});

/script

上面只是js代碼，完整實例代碼點擊此處本站下載。

更多關于jQuery插件相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》

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

jquery如何讓圖片放大旋轉一定角度

這個現(xiàn)在可以用css3來完成來；

transform: rotate(90deg) 旋轉90度

transform: scale(1.2); 放大1.2倍