图片旋转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度呢

现在我们以这个苹果的图片作为例子