1 การใช้งานโดยใช้ jQueryRotate.js
รหัสตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<! 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"/>
<อินพุต 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") คลิก (ฟังก์ชัน () {
num ++;
$ ("#img1"). หมุน (90*num);
-
</script>
</html>
ผลการทดสอบ: เอฟเฟกต์ภายใต้โครเมี่ยมเป็นเรื่องปกติและวัตถุ IMG ยังคงเป็นวัตถุ IMG หลังจากการหมุน วัตถุ IMG ยังคงได้รับตามวิธีดั้งเดิมหลังจากการหมุนจะมีการรายงานข้อผิดพลาด JS ในการรับวัตถุภาพคุณสามารถรับได้ตามชั้นเรียน วิธีนี้สามารถใช้ได้หากไม่มีการดำเนินการอื่น ๆ หลังจากหมุนภาพ หากดำเนินการอื่น ๆ เช่นการขยายหรือลดภาพวิธีนี้มีความซับซ้อนมากขึ้นในการใช้งาน
การคัดลอกรหัสมีดังนี้:
<ช่วง ... >
<rvml: กลุ่ม ... >
<rvml: ภาพ .../>
</rvml: กลุ่ม>
</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"/>
<อินพุต id = "input1" type = "button" value = "btn1"> </input>
</div>
</body>
<script type = "text/javascript" src = "jQuery.min.js"> </script>
<script type = "text/javascript">
ฟังก์ชั่นหมุน (id, มุม, ดังนั้น) {
var p = document.getElementById (id);
// เราเก็บมุมภายในแท็กรูปภาพเพื่อความเพียร
ถ้า (! ที่ไหน) {
p.angle = ((p.angle == undefined? 0: p.angle) + มุม) % 360;
} อื่น {
p.angle = มุม;
-
ถ้า (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 (การหมุน);
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 ขยายอัตโนมัติ ') ";
} อื่น {
var canvas = document.createElement ('Canvas');
ถ้า (! p.oimage) {
canvas.oimage = ภาพใหม่ ();
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');
บริบท save ();
if (rotation <= math.pi/2) {
บริบทการแปล (Sintheta*canvas.oimage.height, 0);
} อื่นถ้า (การหมุน <= math.pi) {
Context.translate (Canvas.width, -costheta*canvas.oimage.height);
} อื่นถ้า (การหมุน <= 1.5*math.pi) {
Context.translate (-costheta*canvas.oimage.width, Canvas.height);
} อื่น {
บริบทการแปล (0, -sintheta*canvas.oimage.width);
-
บริบทการค้าขาย (การหมุน);
Context.DrawImage (Canvas.oimage, 0, 0, Canvas.oimage.width, Canvas.oimage.height);
บริบท restore ();
-
Canvas.id = P.ID;
canvas.angle = p.angle;
p.parentNode.replacechild (Canvas, P);
-
ฟังก์ชั่น rotateright (id, มุม) {
หมุน (id, มุม == ไม่ได้กำหนด? 90: มุม);
-
ฟังก์ชั่น rotateleft (id, มุม) {
หมุน (id, angle == undefined? -90:-angle);
-
$ ("#input1") คลิก (ฟังก์ชัน () {
$ ("img.imgrotate"). attr ("id", "imgrotate");
Rotateleft ("Imgrotate", 90);
$ ("#imgrotate"). attr ("top", "50%");
$ ("#imgrotate"). attr ("ซ้าย", "50%");
$ ("#imgrotate"). attr ("มาร์จิ้น", " -50px 0 0 -50px");
-
</script>
</html>
ผลการทดสอบ: เอฟเฟกต์เป็นเรื่องปกติภายใต้โครเมี่ยม แต่วัตถุ IMG กลายเป็นวัตถุผืนผ้าใบหลังจากการหมุน เมทริกซ์ () มีพารามิเตอร์มากมายและต้องการการคำนวณเพิ่มเติมเมื่อใช้
3 การใช้วัตถุพื้นฐานที่จัดทำโดย Microsoft
รหัสตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 เข้มงวด // 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"/>
<อินพุต 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") คลิก (ฟังก์ชัน () {
num = (num + 1) % 4;
document.getElementById ('ภาพ'). style.filter = 'progid: dximagetransform.microsoft.basicimage (rotation ='+num+')';
-
</script>
</html>
ผลการทดสอบ: ผลกระทบไม่สามารถหมุนได้ภายใต้โครเมี่ยม BasicalImage () มีพารามิเตอร์เดียวเท่านั้น
หากคุณดูรหัสของวิธีการทั้งสามนี้คุณจะพบว่ามันเป็นวิธีแก้ปัญหา: ใช้วัตถุ Canvas เพื่อนำไปใช้ใน Chrome และใช้ VML หรือ Matrix () หรือ BasicateMage () เพื่อนำไปใช้ใน IE8 ฉันเพิ่งเปลี่ยนส่วนประกอบ: มันเกี่ยวข้องกับการหมุนและขยายภาพ ต่อมามีการตัดสินใจที่จะประมวลผล Chrome และ IE8 แยกต่างหากโดยใช้ jQueryRotate ใน Chrome และ BasicAmage () ใน IE8 เพื่อให้มั่นใจถึงความเรียบง่ายและความสามารถในการอ่านของรหัส