1 implémentation à l'aide de jQuerryrotate.js
Exemple de code:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title> </Title>
<style type = "text / css">
# div1 {
Largeur: 800px;
Hauteur: 600px;
Color d'arrière-plan: # FF0;
Position: absolue;
}
.imGrotate {
Largeur: 100px;
hauteur: 80px;
Position: absolue;
en haut: 50%;
Gauche: 50%;
marge: -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 = "bouton" value = "btn2"> </ entrée>
</div>
</docy>
<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"). Cliquez sur (fonction () {
num ++;
$ ("# img1"). Rotation (90 * num);
});
</cript>
</html>
Résultats du test: L'effet sous Chrome est normal, et l'objet IMG est toujours un objet IMG après rotation; L'objet IMG est toujours obtenu en fonction de la méthode d'origine après rotation, il sera signalé. Pour obtenir l'objet image, vous pouvez l'obtenir en fonction de la classe. Cette méthode est disponible si aucune autre opération n'est effectuée une fois l'image tournée. Si d'autres opérations sont effectuées, comme l'agrandissement ou la réduction de l'image, cette méthode est plus compliquée à implémenter.
La copie de code est la suivante:
<span ...>
<rvml: groupe ...>
<rvml: image ... />
</ rvml: groupe>
</span>
2 Utilisation d'objets matriciels fournis par Microsoft
Exemple de code:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<Title> </Title>
<style type = "text / css">
# div1 {
Largeur: 800px;
Hauteur: 600px;
Color d'arrière-plan: # FF0;
Position: absolue;
}
.imGrotate {
Largeur: 100px;
hauteur: 100px;
Position: absolue;
en haut: 50%;
Gauche: 50%;
marge: -50px 0 0 -50px;
}
#imGrotate {
Largeur: 100px;
hauteur: 100px;
Position: absolue;
en haut: 50%;
Gauche: 50%;
marge: -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 = "bouton" value = "btn1"> </ entrée>
</div>
</docy>
<script type = "text / javascript" src = "jQuery.min.js"> </ script>
<script type = "text / javascript">
fonction tourne (id, angle, d'où) {
var p = document.getElementById (id);
// nous stockons l'angle à l'intérieur de la balise d'image pour la persistance
if (! d'où) {
p.angle = ((p.angle == Undefined? 0: P.Angle) + angle)% 360;
} autre {
p.angle = angle;
}
if (p.angle> = 0) {
var rotation = math.pi * p.angle / 180;
} autre {
var rotation = math.pi * (360 + p.angle) / 180;
}
var costTheta = math.cos (rotation);
var mentheta = 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 + " Auto Expand ') ";
} autre {
var canvas = document.CreateElement ('Canvas');
if (! p.oimage) {
canvas.oimage = new image ();
canvas.oimage.src = p.src;
} autre {
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);
} autre {
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.ang;
p.parentNode.replaceChild (Canvas, P);
}
fonction rotateright (id, angle) {
tourner (id, angle == non défini? 90: angle);
}
fonction rotateleft (id, angle) {
Rotation (id, angle == Undefined? -90: -Angle);
}
$ ("# input1"). Cliquez sur (fonction () {
$ ("img.imgrotate"). attr ("id", "imgrotate");
rotateleft ("imgrotate", 90);
$ ("# ImGrotate"). ART ("TOP", "50%");
$ ("# imgrotate"). att ("Left", "50%");
$ ("# imgrotate"). att ("margin", "- 50px 0 0 -50px");
});
</cript>
</html>
Résultats du test: L'effet est normal sous Chrome, mais l'objet IMG devient un objet de toile après rotation; l'effet est normal sous IE8, et l'objet IMG est toujours un objet IMG après rotation. Matrix () a de nombreux paramètres et nécessite plus de calculs lorsqu'ils sont utilisés.
3 Utilisation d'objets BasicMage fournis par Microsoft
Exemple de code:
La copie de code est la suivante:
<! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
</ head>
<body>
<img id = "image" src = "http://www.baidu.com/img/logo-yy.gif" />
<input id = "input2" type = "bouton" value = "btn2"> </ entrée>
</docy>
<script type = "text / javascript" src = "jQuery.min.js"> </ script>
<script type = "text / javascript">
var num = 0;
$ ("# input2"). Cliquez sur (fonction () {
num = (num + 1)% 4;
document.getElementById ('image'). style.filter = 'PROGID: dxiagetransform.microsoft.basicImage (rotation =' + num + ')';
});
</cript>
</html>
Résultats du test: l'effet ne peut pas être tourné sous chrome; l'effet est normal sous IE8, et l'objet IMG est toujours un objet IMG après rotation. BasicMage () n'a qu'un seul paramètre.
Si vous regardez le code de ces trois méthodes, vous constaterez qu'il s'agit essentiellement d'une solution: utilisez l'objet Canvas pour l'implémenter dans Chrome et utilisez VML ou Matrix () ou BasicMage () pour l'implémenter dans IE8. J'ai récemment transformé un composant: il implique la rotation et l'élargissement de l'image. Plus tard, il a été décidé de traiter Chrome et IE8 séparément, en utilisant jQueryrotate dans Chrome, et BasicImage () dans IE8, garantissant la simplicité et la lisibilité du code.