jqueryrotate.jsを使用した1つの実装
サンプルコード：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title> </title>
<style type = "text/css">
＃div1 {
幅：800px;
高さ：600px;
バックグラウンドカラー：＃ff0;
位置：絶対;
}
.imgrotate {
幅：100px;
高さ：80px;
位置：絶対;
トップ：50％;
左：50％;
マージン：-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"）。クリック（function（）{
num ++;
$（ "＃img1"）。回転（90*num）;
}）;
</script>
</html>
テストの結果：Chromeの下での効果は、IE8の下での効果は依然としてIMGオブジェクトですIMGオブジェクトは、回転後も元の方法に従って取得されます。JSエラーが報告されます。画像オブジェクトを取得するには、クラスに従って取得できます。この方法は、画像が回転した後に他の操作が実行されない場合に使用できます。画像の拡大や削減など、他の操作が実行された場合、この方法は実装するのがより複雑です。
コードコピーは次のとおりです。
<スパン...>
<rvml：グループ...>
<rvml：image .../>
</rvml：group>
</span>
2 Microsoftが提供するマトリックスオブジェクトを使用します
サンプルコード：
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title> </title>
<style type = "text/css">
＃div1 {
幅：800px;
高さ：600px;
バックグラウンドカラー：＃ff0;
位置：絶対;
}
.imgrotate {
幅：100px;
高さ：100px;
位置：絶対;
トップ：50％;
左：50％;
マージン：-50px 0 0 -50px;
}
#imgrotate {
幅：100px;
高さ：100px;
位置：絶対;
トップ：50％;
左：50％;
マージン：-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">
関数回転（id、angle、whence）{
var p = document.getElementById（id）;
//永続性のために画像タグ内に角度を保存します
if（！whence）{
p.angle =（（p.angle == undefined？0：p.angle） + angle）％360;
} それ以外 {
p.angle = angle;
}
if（p.angle> = 0）{
var Rotation = math.pi * p.angle / 180;
} それ以外 {
var Rotation = math.pi *（360+p.angle） / 180;
}
var costtheta = math.cos（回転）;
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：dimbyagetransform.microsoft.matrix（m11 ="+costheta+"、m12 ="+（ - sintheta）+"、m21 ="+sintheta+"、m22 ="+costheta+"、sizizedmethod = ' Auto Expand '） ";
} それ以外 {
var canvas = document.createelement（ 'canvas'）;
if（！p.oimage）{
canvas.oimage = new Image（）;
canvas.oimage.src = p.src;
} それ以外 {
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）;
} それ以外 {
context.translate（0、-sintheta*canvas.oimage.width）;
}
context.rotate（回転）;
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）;
}
関数回転動物（id、angle）{
回転（id、angle == undefined？90：angle）;
}
関数rotateleft（id、angle）{
回転（id、angle == undefined？-90：-anger）;
}
$（ "＃input1"）。クリック（function（）{
$（ "img.imgrotate"）。attr（ "id"、 "imgrotate"）;
Rotateleft（ "imgrotate"、90）;
$（ "＃imgrotate"）。attr（ "top"、 "50％"）;
$（ "＃imgrotate"）。attr（ "left"、 "50％"）;
$（ "＃imgrotate"）。
}）;
</script>
</html>
テストの結果：効果はChromeの下で正常ですが、IMGオブジェクトはIE8では効果が正常であり、IMGオブジェクトは回転後もIMGオブジェクトです。 Matrix（）には多くのパラメーターがあり、使用するとより多くの計算が必要です。
3 Microsoftが提供するBasicImageオブジェクトの使用
サンプルコード：
コードコピーは次のとおりです。
<！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"）。クリック（function（）{
num =（num + 1）％4;
document.getElementById（ 'Image'）。style.filter= 'progid：dmimagetransform.microsoft.basicimage（rotation ='+num+'）';
}）;
</script>
</html>
テスト結果：効果はChromeで回転することはできません。 BasicImage（）のパラメーターは1つだけです。
これら3つの方法のコードを見ると、それが本質的に解決策であることがわかります。Canvasオブジェクトを使用してChromeに実装し、VMLまたはMatrix（）またはBasicImage（）を使用してIE8に実装します。最近、コンポーネントを変換しました。Jqueryrotate.jsはIE8の下で新しいオブジェクトを生成するため、画像を選択する前に特別な処理が必要です。その後、ChromeとIE8を個別に処理し、ChromeでJQueryrotateを使用し、IE8でBasicImage（）を使用して、コードのシンプルさと読みやすさを確保することが決定されました。