1 Implementação usando jqueryrotate.js
Código de exemplo:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<Title> </title>
<style type = "text/css">
#div1 {
Largura: 800px;
Altura: 600px;
Background-Color: #ff0;
Posição: Absoluto;
}
.Imgrotate {
Largura: 100px;
Altura: 80px;
Posição: Absoluto;
TOP: 50%;
Esquerda: 50%;
margem: -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"). Clique (function () {
num ++;
$ ("#img1"). Gire (90*num);
});
</script>
</html>
Resultados do teste: O efeito em Chrome é normal e o objeto IMG ainda é um objeto IMG após a rotação; O objeto IMG ainda é obtido de acordo com o método original após a rotação, ele será relatado. Para obter o objeto de imagem, você pode obtê -lo de acordo com a classe. Este método está disponível se nenhuma outra operações for executada após a rotacionada da imagem. Se outras operações forem executadas, como ampliar ou reduzir a imagem, esse método é mais complicado de implementar.
A cópia do código é a seguinte:
<span ...>
<rvml: grupo ...>
<rvml: imagem .../>
</rvml: grupo>
</span>
2 Usando objetos Matrix fornecidos pela Microsoft
Código de exemplo:
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<Title> </title>
<style type = "text/css">
#div1 {
Largura: 800px;
Altura: 600px;
Background-Color: #ff0;
Posição: Absoluto;
}
.Imgrotate {
Largura: 100px;
Altura: 100px;
Posição: Absoluto;
TOP: 50%;
Esquerda: 50%;
margem: -50px 0 0 -50px;
}
#imgrotate {
Largura: 100px;
Altura: 100px;
Posição: Absoluto;
TOP: 50%;
Esquerda: 50%;
margem: -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">
função girar (id, ângulo, onde) {
var p = document.getElementById (id);
// armazenamos o ângulo dentro da tag de imagem para persistência
if (! de onde) {
P.anGlan = ((P.ange == indefinido? 0: p.angning) + ângulo) % 360;
} outro {
p.annAnge = ângulo;
}
if (p.ange> = 0) {
var ratation = math.pi * p.angle / 180;
} outro {
var ratation = math.pi * (360+p.angning) / 180;
}
var costtheta = math.cos (rotação);
var sinteta = math.sin (rotação);
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 ="+cosheta+", m12 ="+(-sinetta)+", m21 ="+sineta+", m22 ="+costheta+", sizingmethod = Expanda automática ') ";
} outro {
var canvas = document.createElement ('canvas');
if (! p.oimage) {
canvas.oimage = new Image ();
canvas.oimage.src = p.src;
} outro {
canvas.oimage = p.oimage;
}
canvas.style.width = Canvas.width = Math.abs (costheta*canvas.oimage.width) + math.abs (sinetheta*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 (rotação <= math.pi/2) {
context.Translate (SINTheta*Canvas.oimage.Height, 0);
} else if (rotação <= math.pi) {
context.Translate (Canvas.width, -Costheta*canvas.oimage.Height);
} else if (rotação <= 1.5*math.pi) {
context.Translate (-Costheta*Canvas.oimage.width, Canvas.Height);
} outro {
context.Translate (0, -síteta*canvas.oimage.width);
}
context.rotate (rotação);
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);
}
Função Rotateright (id, ângulo) {
girar (id, ângulo == indefinido? 90: ângulo);
}
função rotateleft (id, ângulo) {
girar (id, ângulo == indefinido? -90: -Arange);
}
$ ("#input1"). Clique (function () {
$ ("img.imgrotate"). att ("id", "imgrotate");
rotateleft ("imgrotate", 90);
$ ("#imgrotate"). Att ("top", "50%");
$ ("#imgrotate"). Att ("esquerda", "50%");
$ ("#imgrotate"). Att ("margem", " -50px 0 0 -50px");
});
</script>
</html>
Resultados do teste: O efeito é normal no Chrome, mas o objeto IMG se torna um objeto de tela após a rotação; O Matrix () possui muitos parâmetros e requer mais cálculos quando usado.
3 Usando objetos básicos fornecidos pela Microsoft
Código de exemplo:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 strict // pt" "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 = "imagem" 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"). Clique (function () {
num = (num + 1) % 4;
document.getElementById ('Image'). style.filter = 'Progid: dxxETransform.microsoft.basicimage (rotação ='+num+');
});
</script>
</html>
Resultados dos testes: O efeito não pode ser girado em Chrome; BasicImage () possui apenas um parâmetro.
Se você observar o código desses três métodos, descobrirá que é essencialmente uma solução: use o objeto Canvas para implementá -lo no Chrome e use VML ou Matrix () ou BasicImage () para implementá -lo no IE8. Recentemente, transformei um componente: envolve girar e aumentar a imagem. Mais tarde, foi decidido processar o Chrome e o IE8 separadamente, usando o jQueryrotate no Chrome e o BasicImage () no IE8, garantindo a simplicidade e a legibilidade do código.