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:

CopyCode The 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 * 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