当前位置:Web前端 > javascript> 正文

js实现图片旋转

时间:2014-12-14类别:Web前端

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

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐