js实现图片旋转

更多时间：2014-12-14 类别：Web前端浏览量：1098

js实现图片旋转

js实现图片旋转

方式一、IE下用DXImageTransform.Microsoft.BasicImage，其它浏览器用rotate（90°--180°--270°）

HTML 代码复制


<!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 （任意角度）

HTML 代码复制


<!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>

标签：javascript

上一篇：html中hr标签

下一篇：css瀑布流布局

您可能感兴趣

js实现图片旋转

js实现图片旋转

热门推荐

排行榜