An interesting jQuery rotation plug-in is found on the Internet. It supports InternetExplorer6.0 +, Firefox2.0, Safari3, Opera9, and GoogleChrome. Transform is used in advanced browsers, while VML is used in earlier versions of ie, if you are interested, you can find an interesting jQuery rotation plug-in on the Internet. It supports Internet Explorer 6.0 +, Firefox 2.0, Safari 3, Opera 9, and Google Chrome, advanced browsers use Transform, while earlier ie uses VML.
Call and method:
Rotate (angle)
Angle Parameter: [Number]-0 by default-rotate the Image Based on the given angle
For example:
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:
The 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 ):
The 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 ):
The 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:
The 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 ):
The Code is as follows:
Function (x, t, B, c, d) {return (t/d) * c ;}
Example (click on arrow ):
The 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 ):
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:
The Code is as follows:
$ ("# Img"). rotate ({
Angle: 45,
Bind :{
Click: function (){
Alert ($ (this). getRotateAngle ());
}
}
});
StopRotate
This function simply stops ongoing rotation animation.
For example:
The 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
