1 التنفيذ باستخدام jqueryrotate.js
نموذج الرمز:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> </title>
<type type = "text/css">
#div1 {
العرض: 800 بكسل ؛
الارتفاع: 600 بكسل ؛
خلفية اللون: #ff0 ؛
الموقف: مطلق ؛
}
.imgrotate {
العرض: 100px ؛
الارتفاع: 80 بكسل ؛
الموقف: مطلق ؛
أعلى: 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 ، كائن IMG كائن IMG بعد الدوران ؛ لا يزال يتم الحصول على كائن IMG وفقًا للطريقة الأصلية بعد الدوران ، وسيتم الإبلاغ عنه. للحصول على كائن الصورة ، يمكنك الحصول عليه وفقًا للفصل. تتوفر هذه الطريقة إذا لم يتم تنفيذ عمليات أخرى بعد تدوير الصورة. إذا تم تنفيذ عمليات أخرى ، مثل توسيع الصورة أو تقليلها ، تكون هذه الطريقة أكثر تعقيدًا للتنفيذ.
نسخة الكود كما يلي:
<span ...>
<RVML: Group ...>
<RVML: Image .../>
</rvml: Group>
</span>
2 باستخدام كائنات المصفوفة التي توفرها Microsoft
نموذج الرمز:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> </title>
<type type = "text/css">
#div1 {
العرض: 800 بكسل ؛
الارتفاع: 600 بكسل ؛
خلفية اللون: #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">
وظيفة تدوير (معرف ، زاوية ، من أين) {
var p = document.getElementById (id) ؛
// نقوم بتخزين الزاوية داخل علامة الصورة من أجل الثبات
إذا (! من أين) {
p.angle = ((p.angle == undefined؟ 0: p.angle) + angle) ٪ 360 ؛
} آخر {
p.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 (الدوران) ؛
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+"، sizemethod = ' توسع تلقائي ")" ؛
} آخر {
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 (الدوران <= math.pi/2) {
context.translate (sintheta*canvas.oimage.height ، 0) ؛
} آخر إذا (الدوران <= math.pi) {
context.translate (canvas.width ، -cotheta*canvas.oimage.height) ؛
} آخر إذا (الدوران <= 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) ؛
}
وظيفة الدوار (معرف ، زاوية) {
تدوير (معرف ، زاوية == غير محددة؟ 90: زاوية) ؛
}
وظيفة rotateleft (معرف ، زاوية) {
تدوير (id ، angle == غير محددة؟ -90: -angle) ؛
}
$ ("#input1"). انقر فوق (function () {
$ ("img.imgrotate"). attr ("id" ، "imgrotate") ؛
rotateleft ("imgrotate" ، 90) ؛
$ ("#imgrotate"). attr ("Top" ، "50 ٪") ؛
$ ("#imgrotate"). attr ("left" ، "50 ٪") ؛
$ ("#imgrotate"). attr ("margin" ، " -50px 0 0 -50px") ؛
}) ؛
</script>
</html>
نتائج الاختبار: يكون التأثير طبيعيًا تحت Chrome ، لكن كائن IMG يصبح كائنًا قماشًا بعد الدوران ؛ تحتوي المصفوفة () على العديد من المعلمات وتتطلب المزيد من الحسابات عند استخدامها.
3 باستخدام كائنات BasicImage التي توفرها Microsoft
نموذج الرمز:
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 Strict // en" "http://www.w3
<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: dimizageTransform.microsoft.basicimage (Rotation ='+num+')' ؛
}) ؛
</script>
</html>
نتائج الاختبار: لا يمكن تدوير التأثير تحت Chrome ؛ BasicImage () لديه معلمة واحدة فقط.
إذا نظرت إلى رمز هذه الطرق الثلاث ، فستجد أنه حل في الأساس: استخدم كائن القماش لتنفيذه في Chrome ، واستخدام VML أو Matrix () أو BasicImage () لتنفيذه في IE8. لقد قمت مؤخرًا بتحويل مكون: يتضمن تدوير الصورة وتوسيعها. في وقت لاحق ، تقرر معالجة Chrome و IE8 بشكل منفصل ، وذلك باستخدام jQueryRotate في Chrome ، و BasicImage () في IE8 ، مما يضمن بساطة الكود وسهولة القراءة.