1 Implementasi Menggunakan jQueryRotate.js
Kode contoh:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> </title>
<type style = "text/css">
#Div1 {
Lebar: 800px;
Tinggi: 600px;
latar belakang-warna: #ff0;
Posisi: Absolute;
}
.imgrotate {
Lebar: 100px;
Tinggi: 80px;
Posisi: Absolute;
Atas: 50%;
Kiri: 50%;
margin: -40px 0 0 -50px;
}
</tyle>
</head>
<body>
<Div id = "Div1">
<img id = "img1" src = "http://www.baidu.com/img/logo-yy.gif"/>
<input id = "input2" type = "Tombol" value = "btn2"> </input>
</div>
</body>
<script type = "text/javascript" src = "jQuery.min.js"> </script>
<script type = "text/javascript" src = "jQueryRotate.js"> </script>
<type skrip = "Teks/JavaScript">
var num = 0;
$ ("#input2"). Klik (function () {
num ++;
$ ("#img1"). Rotate (90*num);
});
</script>
</html>
Hasil Tes: Efek di bawah Chrome normal, dan objek IMG masih merupakan objek IMG setelah rotasi; Objek IMG masih diperoleh sesuai dengan metode asli setelah rotasi, itu akan dilaporkan. Untuk mendapatkan objek gambar, Anda bisa mendapatkannya sesuai dengan kelas. Metode ini tersedia jika tidak ada operasi lain yang dilakukan setelah gambar diputar. Jika operasi lain dilakukan, seperti memperbesar atau mengurangi gambar, metode ini lebih rumit untuk diimplementasikan.
Salinan kode adalah sebagai berikut:
<span ...>
<rvml: grup ...>
<rvml: gambar .../>
</rvml: group>
</span>
2 Menggunakan objek matriks yang disediakan oleh Microsoft
Kode contoh:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> </title>
<type style = "text/css">
#Div1 {
Lebar: 800px;
Tinggi: 600px;
latar belakang-warna: #ff0;
Posisi: Absolute;
}
.imgrotate {
Lebar: 100px;
Tinggi: 100px;
Posisi: Absolute;
Atas: 50%;
Kiri: 50%;
margin: -50px 0 0 -50px;
}
#imgrotate {
Lebar: 100px;
Tinggi: 100px;
Posisi: Absolute;
Atas: 50%;
Kiri: 50%;
margin: -50px 0 0 -50px;
}
</tyle>
</head>
<body>
<Div id = "Div1">
<img id = "img1" src = "http://www.baidu.com/img/logo-yy.gif"/>
<input id = "input1" type = "tombol" value = "btn1"> </input>
</div>
</body>
<script type = "text/javascript" src = "jQuery.min.js"> </script>
<type skrip = "Teks/JavaScript">
fungsi berputar (id, sudut, dari mana) {
var p = document.getElementById (id);
// Kami menyimpan sudut di dalam tag gambar untuk kegigihan
if (! whence) {
p.angle = ((p.angle == tidak terdefinisi? 0: p.angle) + sudut) % 360;
} kalau tidak {
p.angle = sudut;
}
if (p.angle> = 0) {
var rotation = math.pi * p.angle / 180;
} kalau tidak {
var rotation = math.pi * (360+p.angle) / 180;
}
var costtheta = math.cos (rotasi);
var Sintheta = Math.sin (rotasi);
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 =" +intheta+", m22 ="+costheta+", sintheta = 'SINTHETA =" Auto Expand ') ";
} kalau tidak {
var canvas = document.createElement ('Canvas');
if (! p.oimage) {
canvas.oimage = gambar baru ();
canvas.oimage.src = p.src;
} kalau tidak {
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 (rotasi <= math.pi/2) {
Context.translate (SINTHETA*CANVAS.OIMAGE.HEIGHT, 0);
} lain jika (rotasi <= math.pi) {
context.translate (canvas.width, -costheta*canvas.oimage.height);
} lain jika (rotasi <= 1.5*math.pi) {
context.translate (-costheta*canvas.oimage.width, canvas.height);
} kalau tidak {
context.translate (0, -sintheta*canvas.oimage.width);
}
context.rotate (rotasi);
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);
}
fungsi rotateright (id, sudut) {
putar (id, sudut == tidak terdefinisi? 90: sudut);
}
fungsi rotateleft (id, sudut) {
putar (id, sudut == tidak terdefinisi? -90: -angel);
}
$ ("#input1"). Klik (function () {
$ ("img.imgrotate"). attr ("id", "iMgrotate");
rotateleft ("imgrotate", 90);
$ ("#imGrotate"). attr ("atas", "50%");
$ ("#imGrotate"). attr ("kiri", "50%");
$ ("#imGrotate"). attr ("margin", " -50px 0 0 -50px");
});
</script>
</html>
Hasil tes: Efeknya normal di bawah chrome, tetapi objek IMG menjadi objek kanvas setelah rotasi; Matrix () memiliki banyak parameter dan membutuhkan lebih banyak perhitungan saat digunakan.
3 Menggunakan objek BasicImage yang disediakan oleh Microsoft
Kode contoh:
Salinan kode adalah sebagai berikut:
<! 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 = "konten tipe" content = "text /html; charset = utf-8" />
</head>
<body>
<img id = "gambar" src = "http://www.baidu.com/img/logo-yy.gif"/>
<input id = "input2" type = "Tombol" value = "btn2"> </input>
</body>
<script type = "text/javascript" src = "jQuery.min.js"> </script>
<type skrip = "Teks/JavaScript">
var num = 0;
$ ("#input2"). Klik (function () {
num = (num + 1) % 4;
document.geteLementById ('image'). style.filter = 'progid: dximagetransform.microsoft.basicimage (rotation ='+num+')';
});
</script>
</html>
Hasil tes: Efeknya tidak dapat diputar di bawah krom; BasicImage () hanya memiliki satu parameter.
Jika Anda melihat kode dari ketiga metode ini, Anda akan menemukan bahwa itu pada dasarnya adalah solusi: Gunakan objek Canvas untuk mengimplementasikannya di Chrome, dan menggunakan VML atau Matrix () atau BasicImage () untuk mengimplementasikannya di IE8. Saya baru -baru ini mengubah komponen: ini melibatkan memutar dan memperbesar gambar. Kemudian, diputuskan untuk memproses Chrome dan IE8 secara terpisah, menggunakan jQueryRotate di Chrome, dan BasicImage () di IE8, memastikan kesederhanaan dan keterbacaan kode.