1 Implementierung mit jQueryRotate.js
Beispielcode:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> </title>
<style type = "text/css">
#div1 {
Breite: 800px;
Höhe: 600px;
Hintergrundfarbe: #ff0;
Position: absolut;
}
.imGrotate {
Breite: 100px;
Höhe: 80px;
Position: absolut;
Top: 50%;
Links: 50%;
Rand: -40px 0 0 -50px;
}
</style>
</head>
<body>
<div id = "div1">
<img id = "img1" src = "http://www.baidu.com/img/logo-yy.gif"/>
<Eingabe -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"). Drehen (90*num);
});
</script>
</html>
Testergebnisse: Der Effekt unter Chrom ist normal, und das IMG -Objekt ist nach der Drehung immer noch ein IMG -Objekt. IMG -Objekt wird nach der ursprünglichen Methode nach der Rotation noch erhalten, es wird gemeldet. Um das Bildobjekt zu erhalten, können Sie es gemäß der Klasse erhalten. Diese Methode ist verfügbar, wenn nach dem Drehen des Bildes keine anderen Operationen ausgeführt werden. Wenn andere Vorgänge ausgeführt werden, z. B. das Vergrößern oder Reduzieren des Bildes, ist diese Methode komplizierter zu implementieren.
Die Codekopie lautet wie folgt:
<spann ...>
<rvml: Gruppe ...>
<rvml: Bild .../>
</rvml: Gruppe>
</span>
2 Verwenden von Matrixobjekten von Microsoft
Beispielcode:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> </title>
<style type = "text/css">
#div1 {
Breite: 800px;
Höhe: 600px;
Hintergrundfarbe: #ff0;
Position: absolut;
}
.imGrotate {
Breite: 100px;
Höhe: 100px;
Position: absolut;
Top: 50%;
Links: 50%;
Rand: -50px 0 0 -50px;
}
#imGrotate {
Breite: 100px;
Höhe: 100px;
Position: absolut;
Top: 50%;
Links: 50%;
Rand: -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">
Funktion drehen (ID, Winkel, woher) {
var p = document.getElementById (id);
// Wir speichern den Winkel im Bild -Tag für die Persistenz
if (! woher) {
P.Annle = ((P.Annle == undefiniert? 0: P.Annle) + Winkel) % 360;
} anders {
P.Annle = Winkel;
}
if (p.Angle> = 0) {
var rotation = math.pi * p.angle / 180;
} anders {
var rotation = math.pi * (360+P.Annle) / 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=' automatisch erweitern ') ";
} anders {
var canvas = document.createelement ('canvas');
if (! p.oimage) {
canvas.oimage = new Image ();
canvas.oimage.src = p.src;
} anders {
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);
} anders {
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.Annle;
p.parentnode.replacechild (canvas, p);
}
Funktionsfunktion (ID, Winkel) {
drehen (id, Winkel == undefiniert? 90: Winkel);
}
Funktion rotateleft (id, Winkel) {
drehen (id, angle == undefiniert? -90: -angle);
}
$ ("#input1"). Click (function () {
$ ("img.imGrotate"). attr ("id", "iMGrotate");
Rotateleft ("ImGrotate", 90);
$ ("#imGrotate"). Attr ("Top", "50%");
$ ("#imGrotate"). Attr ("links", "50%");
$ ("#imGrotate"). Attr ("Margin", " -50px 0 0 -50px");
});
</script>
</html>
Testergebnisse: Der Effekt ist unter Chrom normal, aber das IMG -Objekt wird nach der Rotation zu einem Leinwandobjekt. Matrix () hat viele Parameter und erfordert bei Verwendung mehr Berechnungen.
3 Verwenden von Basicimage -Objekten von Microsoft bereitgestellt
Beispielcode:
Die Codekopie lautet wie folgt:
<! 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
</head>
<body>
<img id = "image" src = "http://www.baidu.com/img/logo-yy.gif"/>
<Eingabe -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 ('Bild'). style.filter = 'progid: dximagetransform.microsoft.basicimage (Rotation ='+num+')';
});
</script>
</html>
Testergebnisse: Der Effekt kann nicht unter Chrom gedreht werden. BasicImage () hat nur einen Parameter.
Wenn Sie sich den Code dieser drei Methoden ansehen, werden Sie feststellen, dass es sich im Wesentlichen um eine Lösung handelt: Verwenden Sie das Canvas -Objekt, um es in Chrome zu implementieren und verwenden Sie VML oder Matrix () oder BasicImage (), um ihn in IE8 zu implementieren. Ich habe kürzlich eine Komponente transformiert: Da das Bild rotiert und vergrößert wird. Später wurde beschlossen, Chrome und IE8 separat zu verarbeiten, wobei JqueryRotate in Chrome und BasicImage () in IE8 verwendet wurde, um die Einfachheit und Lesbarkeit des Codes zu gewährleisten.