jQuery rotation plug-in—rotate support (ie/Firefox/SafariOpera/Chrome)_jquery

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:

Copy code The code is as follows:

$("# 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:

Copy code The code is as follows:

$("#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):

Copy code The code is as follows:

$("#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):

Copy code The code is as follows:

$("#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:

Copy Code The code is as follows:

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):

Copy code The code is as follows:

function(x, t, b, c, d) { return (t/d)*c; }

Example (click on arrow):

Copy code The code is as follows:

$("#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):

Copy code The code is as follows:

$("#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:

Copy code The code is as follows:

$("#img").rotate({
angle: 45,
bind: {
click : function(){
alert($(this).getRotateAngle ());
}
}
});

stopRotate

This function simply stops the ongoing rotation animation.

For example:

Copy code The code is as follows:

$("# 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