I found a very interesting jQuery rotation plug-in on the Internet, which supports Internet Explorer 6.0, Firefox 2.0, Safari 3, Opera 9, and Google Chrome. Transform is used in advanced browsers, and VML is used in lower versions of IE.
Call and method:
rotate(angle)
angle parameter: [Number] - Default is 0 - Rotate the image according to the given angle
For example:
$("# img").rotate(45);
rotate(parameters)
parameters parameters: [Object] Object containing rotation parameters. Supported attributes:
1.angle attribute : [Number] - default 0 - the number of angles of rotation, and execute immediately
For example:
$("#img").rotate({angle:45});
2.bind attribute: [Object] object, containing events bound to a rotating object. $(this) inside the event points to the rotation object - so you can chain calls inside - $(this).rotate(…). For example (click on arrow):
$("#img ").rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180
})
}
}
});
3.animateTo attribute: [Number] – default 0 – Animate rotation from the current angle value to a given angle value (or a given angle parameter) For example: In conjunction with the above example, see usage.
4.duration attribute : [Number] – Specifies the animation execution duration using animateTo. For example (click on arrow):
$("#img").rotate({bind:{
click: function(){
$(this ).rotate({
duration:6000,
angle: 0,
animateTo:100
})
}
}
});
5.step attribute: [Function] – callback function executed in each animation step, with the current angle value as the first parameter of the function
6.easing attribute: [Function] – Default (see below) – Easing function used to make animation look more natural. It takes five parameters (x,t,b,c,d) to support easing from http://gsgd.co. uk/sandbox/jquery/easing/ (for more details please see documentation at their website). Remember to include easing plugin before using it in jQueryRotate!Default function:
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; }
Example (click on arrow):
$("#img").rotate({bind:{
click : function(){
$(this).rotate({
angle: 0,
animateTo:180,
easing: $.easing.easeInOutElastic
})
}
}
});
7. callback attribute : [Function] The callback function executed when the animation is completed. For example (click on arrow):
$("#img").rotate({bind:{
click: function(){
$(this).rotate({
angle: 0,
animateTo:180,
callback: function(){ alert(1) }
} )
}
}
});
getRotateAngle This function simply returns the current angle of the rotated object.
For example:
$("#img").rotate({
angle: 45,
bind: {
click : function(){
alert($(this).getRotateAngle ());
}
}
});
stopRotate This function simply stops the ongoing rotation animation.
For example:
$("# img").rotate({
bind: {
click: function(){
$("#img").rotate({
angle: 0,
animateTo: 180,
duration: 6000
});
setTimeout(function(){
$("#img").stopRotate();
}, 1000);
}
}
});
Using this to achieve a lot of web page special effects related to rotation, I used this to make a large lottery wheel. The effect is good, but it is not as smooth as flash, and it can basically run haha .
jqueryrotate project address: http://code.google.com/p/jqueryrotate/
Code examples: http://code.google.com/p/jqueryrotate/wiki/Examples
Climb up step by step
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
