1 Implementación utilizando jQueryRotate.js
Código de muestra:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> </title>
<style type = "text/css">
#Div1 {
Ancho: 800px;
Altura: 600px;
Color de fondo: #FF0;
Posición: Absoluto;
}
.imgrotate {
Ancho: 100px;
Altura: 80px;
Posición: Absoluto;
arriba: 50%;
Izquierda: 50%;
margen: -40px 0 0 -50px;
}
</style>
</ablo>
<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"). Rotado (90*num);
});
</script>
</html>
Resultados de la prueba: El efecto en Chrome es normal, y el objeto IMG sigue siendo un objeto IMG después de la rotación; El objeto IMG todavía se obtiene de acuerdo con el método original después de la rotación, se informará. Para obtener el objeto de imagen, puede obtenerlo de acuerdo con la clase. Este método está disponible si no se realizan otras operaciones después de girar la imagen. Si se realizan otras operaciones, como ampliar o reducir la imagen, este método es más complicado de implementar.
La copia del código es la siguiente:
<span ...>
<rvml: grupo ...>
<rvml: imagen .../>
</rvml: grupo>
</span>
2 Uso de objetos de matriz proporcionados por Microsoft
Código de muestra:
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title> </title>
<style type = "text/css">
#Div1 {
Ancho: 800px;
Altura: 600px;
Color de fondo: #FF0;
Posición: Absoluto;
}
.imgrotate {
Ancho: 100px;
Altura: 100px;
Posición: Absoluto;
arriba: 50%;
Izquierda: 50%;
margen: -50px 0 0 -50px;
}
#imgrotate {
Ancho: 100px;
Altura: 100px;
Posición: Absoluto;
arriba: 50%;
Izquierda: 50%;
margen: -50px 0 0 -50px;
}
</style>
</ablo>
<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">
Función Rotar (id, ángulo, de donde) {
var p = document.getElementById (id);
// Almacemos el ángulo dentro de la etiqueta de imagen para persistencia
if (! WhyraSs) {
p.angle = ((p.angle == Undefined? 0: p.angle) + ángulo) % 360;
} demás {
p.angle = ángulo;
}
if (p.angle> = 0) {
Rotación var = Math.Pi * P.Gnangle / 180;
} demás {
Rotación var = math.pi * (360+p.angle) / 180;
}
var costtheta = Math.cos (rotación);
var sintheta = math.sin (rotación);
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+", dimensionamiento = ' Auto expandir ') ";
} demás {
var lienvas = document.createElement ('Canvas');
if (! P.oimage) {
Canvas.oiMage = new Image ();
Canvas.oimage.src = p.src;
} demás {
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 (rotación <= math.pi/2) {
context.translate (sintheta*Canvas.oimage.height, 0);
} else if (rotación <= math.pi) {
context.translate (Canvas.Width, -Costheta*Canvas.oimage.height);
} else if (rotación <= 1.5*math.pi) {
context.translate (-costheta*Canvas.oimage.width, Canvas.Height);
} demás {
context.translate (0, -sintheta*Canvas.oimage.width);
}
context.rotate (rotación);
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, ángulo) {
girar (id, ángulo == Undefinado? 90: ángulo);
}
función rotateleft (id, ángulo) {
girar (id, ángulo == Undefined? -90: -Anlag);
}
$ ("#input1"). Click (function () {
$ ("img.imgrotate"). attr ("id", "imgrotate");
rotateleft ("imgrotate", 90);
$ ("#imgrotate"). attr ("top", "50%");
$ ("#imgrotate"). attr ("izquierda", "50%");
$ ("#imgrotate"). attr ("margen", " -50px 0 0 -50px");
});
</script>
</html>
Resultados de la prueba: El efecto es normal en Chrome, pero el objeto IMG se convierte en un objeto de lona después de la rotación; Matrix () tiene muchos parámetros y requiere más cálculos cuando se usa.
3 Uso de los objetos de Basicimage proporcionados por Microsoft
Código de muestra:
La copia del código es la siguiente:
<! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
</ablo>
<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>
Resultados de la prueba: el efecto no puede rotarse bajo Chrome; Basicimage () tiene solo un parámetro.
Si observa el código de estos tres métodos, encontrará que es esencialmente una solución: use el objeto Canvas para implementarlo en Chrome y use VML o Matrix () o BasicImage () para implementarlo en IE8. Recientemente transformé un componente: implica girar y ampliar la imagen. Más tarde, se decidió procesar Chrome e IE8 por separado, utilizando jQueryrotate en Chrome, y BasicImage () en IE8, asegurando la simplicidad y la legibilidad del código.