jquery圖片旋轉,js讓圖片旋轉

jQuery旋轉插件jqueryrotate用法詳解

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

創新互聯公司主營龍江網站建設的網絡公司,主營網站建設方案,成都app軟件開發公司,龍江h5微信小程序開發搭建,龍江網站營銷推廣歡迎龍江等地區企業咨詢

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:

});

}

}

});

//方式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

數字

旋轉一個角度

animateTo

數字

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

step

函數

每個動畫步驟中執行的回調函數，當前角度值作為該函數的第一個參數

無

easing

函數

自定義旋轉速度、旋轉效果，需要使用

jQuery.easing.js

無

duration

整數

旋轉持續時間，以毫秒為單位

callback

函數

旋轉完成后的回調函數

無

getRotateAngle

函數

返回旋轉對象當前的角度

無

stopRotate

函數

停止旋轉

無

演示雖然使用的是圖片，但

jqueryrotate

并不只是能運用在圖片上，其他元素如

div

等也可以使用。同時，你可以發揮想象，制作出更多關于旋轉的特效。

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery常用插件及用法總結》、《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《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實現一個圖片旋轉，寫了下面的簡單代碼，哪里不對啊？

你沒有引入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插件相關內容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結》

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

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

這個現在可以用css3來完成來；

transform: rotate(90deg) 旋轉90度

transform: scale(1.2); 放大1.2倍

標題名稱：jquery圖片旋轉,js讓圖片旋轉
分享網址：http://m.kartarina.com/article32/dseeesc.html

成都網站建設公司_創新互聯，為您提供自適應網站、網頁設計公司、網站改版、小程序開發、軟件開發、網站收錄

廣告

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