1 Implementation using jQueryRotate.js
Sample code:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 800px;
height: 600px;
background-color: #ff0;
position: absolute;
}
.imgRotate {
width: 100px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" src="http://www.baidu.com/img/logo-yy.gif" />
<input id="input2" type="button" value="btn2"></input>
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.js"></script>
<script type="text/javascript">
var num = 0;
$("#input2").click(function(){
num ++;
$("#img1").rotate(90*num);
});
</script>
</html>
Test results: The effect under chrome is normal, and the img object is still an img object after rotation; the effect under ie8 is normal, but the img object becomes the following object after rotation. Due to the change of the object, if the img object is still obtained according to the original method after rotation, it will be reported. js error. To obtain the image object, you can obtain it according to the class. This method is available if no other operations are performed after the image is rotated. If other operations are performed, such as enlarging or reducing the image, this method is more complicated to implement.
The code copy is as follows:
<span ...>
<rvml:group...>
<rvml:image.../>
</rvml:group>
</span>
2 Using Matrix Objects provided by Microsoft
Sample code:
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#div1 {
width: 800px;
height: 600px;
background-color: #ff0;
position: absolute;
}
.imgRotate {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
#imgRotate {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div id="div1">
<img id="img1" src="http://www.baidu.com/img/logo-yy.gif" />
<input id="input1" type="button" value="btn1"></input>
</div>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function rotate(id,angle,whence) {
var p = document.getElementById(id);
// 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 costtheta = Math.cos(rotation);
var sintheta = Math.sin(rotation);
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);
}
function rotateRight(id,angle) {
rotate(id,angle==undefined?90:angle);
}
function rotateLeft(id,angle) {
rotate(id,angle==undefined?-90:-angle);
}
$("#input1").click(function(){
$("img.imgRotate").attr("id","imgRotate");
rotateLeft("imgRotate",90);
$("#imgRotate").attr("top","50%");
$("#imgRotate").attr("left","50%");
$("#imgRotate").attr("margin","-50px 0 0 -50px");
});
</script>
</html>
Test results: The effect is normal under Chrome, but the img object becomes a canvas object after rotation; the effect is normal under ie8, and the img object is still an img object after rotation. Matrix() has many parameters and requires more calculations when used.
3 Using BasicImage Objects provided by Microsoft
Sample code:
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<img id="image" src="http://www.baidu.com/img/logo-yy.gif" />
<input id="input2" type="button" value="btn2"></input>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var num = 0;
$("#input2").click(function(){
num = (num + 1) % 4;
document.getElementById('image').style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+num+')';
});
</script>
</html>
Test results: The effect cannot be rotated under chrome; the effect is normal under ie8, and the img object is still an img object after rotation. BasicImage() has only one parameter.
If you look at the code of these three methods, you will find that it is essentially a solution: use the canvas object to implement it in chrome, and use VML or Matrix() or BasicImage() to implement it in ie8. I have recently transformed a component: it involves rotating and enlarging the image. Since jQueryRotate.js will generate a new object under ie8, special processing is required when selecting the image before enlarging the image. Later, it was decided to process chrome and ie8 separately, using jQueryRotate in Chrome, and BasicImage() in ie8, ensuring the simplicity and readability of the code.