jquery Rotary plug-in-rotate support (Ie/firefox/safariopera/chrome) _jquery

Discover an interesting jquery rotary plugin on the Internet, support Internet Explorer 6.0+, Firefox 2.0, Safari 3, Opera 9, Google Chrome, use transform in advanced browsers, Low version IE uses VML for implementation.

Calls and methods:

rotate (angle)

Angle parameter: [number]– defaults to 0– rotate the picture based on the given angle

For example:

Copy Code code as follows:

$ ("#img"). Rotate (45);

Rotate (parameters)

Parameters parameter: [Object] contains an object that rotates the parameter. Supported Properties:
1.angle Properties: [Number]–default 0– the number of angles rotated and executed immediately
For example:

Copy Code code as follows:

$ ("#img"). Rotate ({angle:45});

2.bind Properties: An [Object] object that contains events bound to a rotated object. The $ (this) inside the event points to the rotated object-so that you can call-$ (this) in the internal chain. Rotate (...). For example (click on arrow):

Copy Code code as follows:

$ ("#img"). Rotate ({bind:{

Click:function () {

$ (this). Rotate ({

angle:0,

animateto:180
})
}
}
});

3.animateTo Properties: [Number]–default 0– rotates from the current angle value to the given angle value (or the given angle parameter) For example: in combination with the above example, see Use.
4.duration Properties: [number]– specifies an animation execution duration that uses Animateto for example (click on arrow):

Copy Code code as follows:

$ ("#img"). Rotate ({bind:{
Click:function () {
$ (this). Rotate ({
duration:6000,
angle:0,
animateto:100
})
}
}
});

5.step Properties: [function]– The callback function executed in each animation step, the current angle value as the first parameter of the function
6.easing Properties: [function]– Default (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 ple ASE-documentation at their website). Remember to include easing plugin before using it in jqueryrotate! Default function:

Copy Code code 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 code as follows:

function (x, T, B, C, D) {return (t/d) *c}

Example (click on arrow):

Copy Code code as follows:

$ ("#img"). Rotate ({bind:{
Click:function () {
$ (this). Rotate ({
angle:0,
animateto:180,
Easing: $.easing.easeinoutelastic
})
}
}
});

7.callback Properties: [function] The callback function that executes when the animation completes, for example (click on arrow):

Copy Code code 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 code as follows:

$ ("#img"). Rotate ({
ANGLE:45,
Bind: {
Click:function () {
Alert ($ (this). Getrotateangle ());
}
}
});

stoprotate

This function simply stops the rotation animation that is in progress.

For example:

Copy Code code as follows:

$ ("#img"). Rotate ({
Bind: {
Click:function () {
$ ("#img"). Rotate ({
angle:0,
animateto:180,
duration:6000
});
settimeout (function () {
$ ("#img"). Stoprotate ();
}, 1000);
}
}
});

With this can achieve a lot about the rotation of the Web page special effects, I used this to make a lottery big turntable, the effect is good, is no flash smooth, basic can run haha.

Jqueryrotate Project Address: http://code.google.com/p/jqueryrotate/

code example: Http://code.google.com/p/jqueryrotate/wiki/Examples

Climb up and down step by step