圖片旋轉js插件

A. 用js實現圖片旋轉360度，並兼容ie7+

<scriptsrc="../libs/rotate.js"></script>
angle傳過來來的角度源數
//向右旋轉90
functionrotateRight(angle){
varid=$("#id").val();
rotate(id,angle==undefined?90:angle);
}
//向左旋轉90
functionrotateLeft(angle){
varid=$("#id").val();
rotate(id,angle==undefined?-90:-angle);
}

B. js實現圖片旋轉效果

1、首先准備一個HTML文檔，文檔中准備好兩個圖片，接下來會對這兩個圖片進行旋轉。

C. jquery.rotate.js庫中的rotate函數怎麼用。

rotate是jQuery旋轉rotate插件，支持Internet Explorer 6.0+、Firefox 2.0、Safari 3、Opera 9、Google Chrome，高級瀏覽器下使用Transform，低版本ie使用VML實現。

rotate（angle）angle參數：［Number］ – 默認為 0

java">根據給定的角度旋轉圖片例如：
$（「#img」）.rotate（45）;或$(『#img』).rotate({angle:45})

rotate（parameters）parameters參數：［Object］包含旋轉參數的對象。

支持的屬性：

1.angle屬性：［Number］– default 0 –旋轉的角度數，並且立即執行

例如：1$（「#img」）.rotate（{angle:45}）;

2.bind屬性：［Object］對象，包含綁定到一個旋轉對象的事件。事件內部的$（this）指向旋轉對象-這樣可以在內部鏈式調用- $（this）.rotate（…）。

例如（clickonarrow）：
$（「#img」）.rotate（{bind：{
click：function（）{
$（this）.rotate（{
angle：0，
animateTo:180
}）
}
}
}）;

3.animateTo屬性：［Number］– default 0 –從當前角度值動畫旋轉到給定的角度值（或給定的角度參數）

4.ration屬性：［Number］–指定使用animateTo的動畫執行持續時間

例如（clickonarrow）：
$（「#img」）.rotate（{bind：{
click：function（）{
$（this）.rotate（{
ration:6000，
angle：0，
animateTo:100
}）
}
}
}）;

5.step屬性：［Function］–每個動畫步驟中執行的回調函數，當前角度值作為該函數的第一個參數

6.easing屬性：［Function］–默認（see below）

默認：function（x，t，b，c，d）{ return -c *（（t=t/d-1）*t*t*t - 1）+ b; }

Where:

t：current time，

b：begInnIng value，

c：change In value，

d：ration，

x：unused

沒有漸變：No easing（linear easing）：function（x，t，b，c，d）{ return（t/d）*c ; }

示例1:沒有效果，一直轉
$("#scImg").rotate({
angle:0,
animateTo:360,
callback:rotation,
easing:function(x,t,b,c,d){
return(t/d)*c;
}
});

示例2:默認的效果
$("#scImg").rotate({
angle:0,
animateTo:360,
callback:rotation,
easing:function(x,t,b,c,d){
return-c*((t=t/d-1)*t*t*t-1)+b;
}
});

示例3：
$（「#img」）.rotate（{bind：{
click：function（）{
$（this）.rotate（{
angle：0，
animateTo:180，
easing：$.easing.easeInOutElastic
}）
}
}
}）;

7.callback屬性：［Function］動畫完成時執行的回調函數

例如

$（「#img」）.rotate（{bind：{
click：function（）{
$（this）.rotate（{
angle：0，
animateTo:180，
callback：function（）{alert（1）}
}）
}
}
}）;

8.getRotateAngle這個函數只是簡單地返迴旋轉對象當前的角度。

例如：
$（「#img」）.rotate（{
angle：45，
bind：{
click：function（）{
alert（$（this）.getRotateAngle（））;
}
}
}）;

9.stopRotate這個函數只是簡單地停止正在進行的旋轉動畫。例如：

$（「#img」）.rotate（{
bind：{
click：function（）{
$（「#img」）.rotate（{
angle：0，
animateTo：180，
ration：6000
}）;
setTimeout（function（）{
$（「#img」）.stopRotate（）;
}，1000）;
}
}
}）;

D. 用js如何實現這樣的效果，就像360安全衛士裡面的那個旋轉控制項

搞個gif圖片就行了，分數可以追加上去，gif多弄幾個不同顏色的，因為不同的分數對應著不同的顏色

E. HTML怎樣讓一個圖片以自身中心旋轉

CSS2.0實現不了，CSS3.0有個rotate屬性，寫法：xxx:hover{-webkit-transform:rotate(360deg)}，但是不兼容IE10以下的瀏覽器

還有一種辦法，再做一張版旋轉的圖片，滑鼠權hover的時候變成那張旋轉的圖片就好了！

JS可能也可以實現，不過應該會很麻煩

F. 我想在網頁上實現一個小圖片在不停的旋轉的效果，就在那兒不停的360度轉啊轉的樣子

varimg=$(selector);
varspeed=50;
vardeg=0;
setInterval(function(){
img.css({
'-ms-transform':'rotate('+deg+'deg)',/*IE9*/
'-moz-transform':'rotate('+deg+'deg)',/*Firefox*/
'-webkit-transform':'rotate('+deg+'deg)',/*SafariandChrome*/
'-o-transform':'rotate('+deg+'deg)',/*Opera*/
'transform':'rotate('+deg+'deg)'
});
deg+=1;
if(deg>=360){
deg=0;
}
},speed);

G. js 怎麼實現點擊一次圖片旋轉90度，再點擊再轉90度呢

現在我們以這個蘋果的圖片作為例子