1 реализация с использованием jqueryrotate.js
Пример кода:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<title> </title>
<стиль типа = "text/css">
#div1 {
Ширина: 800px;
Высота: 600px;
фоновый цвет: #ff0;
позиция: абсолютно;
}
.imgrotate {
Ширина: 100px;
Высота: 80px;
позиция: абсолютно;
Верх: 50%;
Слева: 50%;
Полевая: -40px 0 0 -50px;
}
</style>
</head>
<тело>
<div id = "div1">
<img id = "img1" src = "http://www.baidu.com/img/logo-yy.gif"/>
<input id = "input2" type = "кнопка" 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"). utate (90*num);
});
</script>
</html>
Результаты испытаний: эффект под Chrome является нормальным, а объект IMG все еще является объектом IMG после вращения; Объект IMG по -прежнему получается в соответствии с исходным методом после вращения, сообщается об ошибке. Чтобы получить объект изображения, вы можете получить его в соответствии с классом. Этот метод доступен, если другие операции не выполняются после того, как изображение повернуто. Если выполняются другие операции, такие как увеличение или уменьшение изображения, этот метод более сложный для реализации.
Кода -копия выглядит следующим образом:
<span ...>
<rvml: группа ...>
<rvml: image .../>
</rvml: группа>
</span>
2 Использование Matrix объектов, предоставленных Microsoft
Пример кода:
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<title> </title>
<стиль типа = "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>
<тело>
<div id = "div1">
<img id = "img1" src = "http://www.baidu.com/img/logo-yy.gif"/>
<input id = "input1" type = "кнопка" value = "btn1"> </input>
</div>
</body>
<script type = "text/javascript" src = "jquery.min.js"> </script>
<script type = "text/javascript">
функция вращается (id, angle, откуда) {
var p = document.getElementbyId (id);
// мы храним угол внутри тега изображения для настойчивости
if (! Откуда) {
p.Angle = ((p.Angle == не определен? 0: P.Angle) + угол) % 360;
} еще {
P.Angle = угол;
}
if (p.angle> = 0) {
var rotation = math.pi * p.angle / 180;
} еще {
var rotation = math.pi * (360+p.Angle) / 180;
}
var osttheta = math.cos (rowation);
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+", sizingmethod = ' Auto расширение ') ";
} еще {
var canvas = document.createElement ('canvas');
if (! 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');
context.save ();
if (rowation <= math.pi/2) {
context.translate (sintheta*canvas.oimage.height, 0);
} else if (rowation <= math.pi) {
context.translate (canvas.width, -costheta*canvas.oimage.height);
} else if (rowation <= 1,5*math.pi) {
context.translate (-costheta*canvas.oimage.width, canvas.height);
} еще {
context.translate (0, -sintheta*canvas.oimage.width);
}
context.rotate (rowation);
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);
}
Функция Rotateright (id, угол) {
вращать (id, angle == не определен? 90: угол);
}
Функция rotateleft (id, angle) {
вращаться (id, angle == не определен? -90: -Angle);
}
$ ("#input1"). Click (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 становится объектом Canvas после вращения; Matrix () имеет много параметров и требует большего количества вычислений при использовании.
3 Использование объектов Basicimage, предоставленных Microsoft
Пример кода:
Кода -копия выглядит следующим образом:
<! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
</head>
<тело>
<img id = "image" src = "http://www.baidu.com/img/logo-yy.gif"/>
<input id = "input2" type = "кнопка" 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 ('image'). style.filter = 'progid: dximagetransform.microsoft.basicimage (rowation ='+num+')';
});
</script>
</html>
Результаты испытаний: эффект не может быть повернут под хромом; BasicImage () имеет только один параметр.
Если вы посмотрите на код этих трех методов, вы обнаружите, что это, по сути, решение: используйте объект Canvas для реализации его в Chrome и используйте VML или Matrix () или Basicimage () для реализации его в IE8. Я недавно преобразовал компонент: он включает в себя вращение и увеличение изображения. Позже было решено обработать Chrome и IE8 отдельно, используя jQueryrotate в Chrome и Basicimage () в IE8, обеспечивая простоту и читаемость кода.