js实现图片旋转
js实现图片旋转方式一、IE下用DXImageTransform.Microsoft.BasicImage，其它浏览器用rotate（90°--180°--270°）
<!DOCTYPE html>
<html>
<head>
<title>js实现图片旋转</title>
<script>
var userAgent = navigator.userAgent,
isIE = /msie/i.test(userAgent) && !window.opera,
isWebKit = /webkit/i.test(userAgent),
isFirefox = /firefox/i.test(userAgent);
var vOther=0;
var vIE=0;
function turn()
{
vOther+=90;
vIE+=1;
if(vOther==360)
{
other=0;
vIE=0;
}
var target=document.getElementById('demo');
if (isWebKit) {
target.style.webkitTransform = "rotate(" + vOther + "deg)";
} else if (isFirefox) {
target.style.MozTransform = "rotate(" + vOther + "deg)";
} else if (isIE) {
target.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation="+vIE+")";
} else {
target.style.transform = "rotate(" + vOther + "deg)";
}
}
</script>
</head>
<body>
<button onclick='turn()'>旋转</button>
<li id="container" style="width:500px;height:400px;position:relative;margin:0 auto">
<li id="demo">
<img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" />
</li>
</li>
</body>
</html>
方式二、IE用 progid:DXImageTransform.Microsoft.Matrix ，其它浏览器用rotate （任意角度）
<!DOCTYPE html>
<html>
<head>
<title>js实现图片旋转</title>
<script>
var
userAgent = navigator.userAgent,
isIE = /msie/i.test(userAgent) && !window.opera,
isWebKit = /webkit/i.test(userAgent),
isFirefox = /firefox/i.test(userAgent);
function rotate(target, degree) {
if (isWebKit) {
target.style.webkitTransform = "rotate(" + degree + "deg)";
} else if (isFirefox) {
target.style.MozTransform = "rotate(" + degree + "deg)";
} else if (isIE) {
degree = degree / 180 * Math.PI;
var sinDeg = Math.sin(degree);
var cosDeg = Math.cos(degree);
target.style.filter = "progid:DXImageTransform.Microsoft.Matrix(" +
"M11=" + cosDeg + ",M12=" + (-sinDeg) + ",M21=" + sinDeg + ",M22=" + cosDeg +
",SizingMethod='auto expand')";
} else {
target.style.transform = "rotate(" + degree + "deg)";
}
}
var perNum=0;
function turn()
{
perNum+=30;
rotate(document.getElementById('demo'), perNum);
}
</script>
</head>
<body>
<button onclick='turn()'>旋转</button>
<li id="container" style="width:500px;height:400px;position:relative;margin:0 auto">
<li id="demo">
<img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" />
</li>
</li>
</body>
</html>