<DIV id=aDiv style="WIDTH: 70pxPOSITION: absoluteHEIGHT: 70px">
<IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图
<DIV>
//使角度转起来
var angle = 0
function doRotate() {
//检查并确保角度值在0到360之间
if(angle>360) angle-=360
//使角度增加
angle+=15
//do rotation
rotate("aDiv",angle)
//定位旋转中心
var el = document.getElementByIdx_x_x("aDiv")//C#中要马上设位置.
el.style.top = 25 - (el.offsetHeight/2)//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试
el.style.left = 25 - (el.offsetWidth/2)//父元素的宽度/2-旋转元素度/2
//循环
setTimeout("doRotate()",20)
}
rotate是jQuery旋转rotate插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。
rotate(angle)angle参数:[Number] – 默认为 0
根据给定的角度旋转图片例如:$(“#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(…)。
例如 (click on arrow):$(“#img”).rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180
})
}
}
})
3.animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)
4.duration属性:[Number] – 指定使用animateTo的动画执行持续时间
例如 (click on arrow):$(“#img”).rotate({bind:{
click: function(){
$(this).rotate({
duration: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: duration,
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,
duration: 6000
})
setTimeout(function(){
$(“#img”).stopRotate()
}, 1000)
}
}
})