Let the picture rotate any angle and the jquery plugin use introduction _jquery

Introduce the Jquery.rotate.js file below and pass $ ("selector"). Rotate (angle); can rotate any angle,
For example $ ("#rotate-image"). Rotate (45); Put this sentence in $ (document). Ready (function () {});
is to rotate the picture with ID rotate-image 45 degrees.

However, it looks like it's always not shown in chrome.
Alas, after looking for two hours, I found that the chrome is too much, and can't get the long width of the picture.
The solution is to put $ ("#rotate-image"). Rotate (45);
$ (window). Load (function () {}), because the picture in Chrome executes $ (document). Ready (function () {}); The statement in is not finished loading the picture, Pit Dad.

In addition, you can make it more convenient by calling $ ("selector"). Rotateright () and $ ("selector"). Rotateleft () to rotate 90 degrees to the right and 90 degrees to the left.

Jquery.rotate.js:

Copy Code code as follows:

JQuery.fn.rotate = function (angle,whence) {
var p = this.get (0);
We store the angle inside the image tag for persistence
if (!whence) {
P.angle = ((p.angle==undefined?0:p.angle) + angle)% 360;
} else {
P.angle = angle;
}
if (p.angle >= 0) {
var rotation = Math.PI * P.ANGLE/180;
} else {
var rotation = Math.PI * (360+p.angle)/180;
}
var Costheta = Math.Round (Math.Cos (rotation) * 1000)/1000;
var Sintheta = Math.Round (Math.sin (rotation) * 1000)/1000;
Alert (costheta+ "," +sintheta);
if (document.all &&!window.opera) {
var canvas = document.createelement (' img ');
CANVAS.SRC = P.SRC;
Canvas.height = P.height;
Canvas.width = P.width;
Canvas.style.filter = "Progid:DXImageTransform.Microsoft.Matrix (m11=" +costheta+ ", m12=" + (-sintheta) + ", m21=" + Sintheta+ ", m22=" +costheta+ ", sizingmethod= ' auto expand ')";
} else {
var canvas = document.createelement (' canvas ');
if (!p.oimage) {
Canvas.oimage = new Image ();
CANVAS.OIMAGE.SRC = P.SRC;
} else {
Canvas.oimage = P.oimage;
}
Canvas.style.width = Canvas.width = Math.Abs (costheta*canvas.oimage.width) + math.abs (sintheta*canvas.oimage.height) ;
Canvas.style.height = Canvas.height = Math.Abs (costheta*canvas.oimage.height) + Math.Abs (sintheta* Canvas.oImage.width);
var context = Canvas.getcontext (' 2d ');
Context.save ();
if (rotation <= MATH.PI/2) {
Context.translate (sintheta*canvas.oimage.height,0);
else if (rotation <= Math.PI) {
Context.translate (Canvas.width,-costheta*canvas.oimage.height);
else if (rotation <= 1.5*math.pi) {
Context.translate (-costheta*canvas.oimage.width,canvas.height);
} else {
Context.translate (0,-sintheta*canvas.oimage.width);
}
Context.rotate (rotation);
Context.drawimage (canvas.oimage, 0, 0, canvas.oImage.width, canvas.oImage.height);
Context.restore ();
}
Canvas.id = p.id;
Canvas.angle = P.angle;
P.parentnode.replacechild (canvas, p);
}
JQuery.fn.rotateRight = function (angle) {
This.rotate (Angle==undefined?90:angle);
}
JQuery.fn.rotateLeft = function (angle) {
This.rotate (Angle==undefined?-90:-angle);
}