Support for jQuery rotation Plugin-rotate (ie/Firefox/SafariOpera/Chrome)

An interesting jQuery rotation plug-in is found on the Internet. It supports Internet Explorer 6.0 +, Firefox 2.0, Safari 3, Opera 9, and Google Chrome. Transform is used in advanced browsers, earlier versions of ie use VML for implementation.

Call and method:

Rotate (angle)

Angle Parameter: [Number]-0 by default-rotate the Image Based on the given angle

For example:
Copy codeThe Code is as follows:
$ ("# Img"). rotate (45 );

Rotate (parameters)

Parameters parameter: [Object] the Object that contains the Rotation Parameter. Supported attributes:
1. angle attribute: [Number]-default 0-Number of rotation angles, and immediate execution
For example:
Copy codeThe Code is as follows:
$ ("# Img"). rotate ({angle: 45 });

2. bind attributes: [Object] Object, including events bound to a rotating Object. $ (This) inside the event points to the rotating object-so that you can call $ (this). rotate (…) in the internal chain (...). For example (click on arrow ):
Copy codeThe Code is as follows:
$ ("# Img"). rotate ({bind :{

Click: function (){

$ (This). rotate ({

Angle: 0,

Animation: 180
})
}
}
});

3. animateTo attributes: [Number]-default 0-rotate an animation from the current angle value to a given angle value (or a given angle parameter). For example, refer to use the preceding example.
4. duration attributes: [Number]-specifies the animation execution duration using animateTo, for example (click on arrow ):
Copy codeThe Code is as follows:
$ ("# Img"). rotate ({bind :{
Click: function (){
$ (This). rotate ({
Duration: 6000,
Angle: 0,
Animation: 100
})
}
}
});

5. step attributes: [Function]-The callback Function executed in each animation step. The current angle value is the first parameter of the Function.
6. easing attributes: [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 codeThe Code is as follows:
Function (x, t, B, c, d) {return-c * (t = t/D-1) * t-1) + B ;}

Where: t: current time,
B: begInnIng value,
C: change In value,
D: duration,
X: unused
No easing (linear easing ):
Copy codeThe Code is as follows:
Function (x, t, B, c, d) {return (t/d) * c ;}

Example (click on arrow ):
Copy codeThe Code is as follows:
$ ("# Img"). rotate ({bind :{
Click: function (){
$ (This). rotate ({
Angle: 0,
AnimateTo: 180,
Easing: $. easing. easeInOutElastic
})
}
}
});

7. callback attributes: [Function] callback Function executed when the animation is completed, for example (click on arrow ):
Copy codeThe 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 codeThe Code is as follows:
$ ("# Img"). rotate ({
Angle: 45,
Bind :{
Click: function (){
Alert ($ (this). getRotateAngle ());
}
}
});

StopRotate

This function simply stops ongoing rotation animation.

For example:
Copy codeThe Code is as follows:
$ ("# Img"). rotate ({
Bind :{
Click: function (){
$ ("# Img"). rotate ({
Angle: 0,
AnimateTo: 180,
Duration: 6000
});
SetTimeout (function (){
$ ("# Img"). stopRotate ();
},1000 );
}
}
});

This can be used to implement a lot of special effects on rotating web pages. I used this to make a lottery turntable. The effect is good, that is, the flash is not smooth, and it can basically run haha.

Jqueryrotate project: http://code.google.com/p/jqueryrotate/

Code example: http://code.google.com/p/jqueryrotate/wiki/Examples

Step by step