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