关于ie10图片旋转

图片

解决方案 »

  1.   

    try:<html>
    <head>
    </head>
    <body>
    <div style="text-align:center;"><input type=button value="旋转图片" onclick="rotate(document.getElementById('_picview'));"/></div>
            <div>
            <img src="http://imgsrc.baidu.com/forum/pic/item/4d2a62d0f703918f7b682dac503d269759eec42c.jpg"  id="_picview" width=680 height=860/>
            </div>
    </body>
    </html>
    <script language="javascript">
        var isIE = (document.all) ? 1 : 0;    
        var i = 1;
        function rotate(image) {
            var object = image.parentNode;
            i++;
            if (i > 4) { i = 1 };
            if (isIE==1) 
                image.style.filter = "progid:dXImagetransform.Microsoft.basicImage(rotation=" + i + ")";
            else {
                switch(i)
                {
                    case 1: image.style.cssText = "-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform:rotate(0deg);-o-transform:rotate(0deg);"; break;
                    case 2: image.style.cssText = "-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform:rotate(90deg);-o-transform:rotate(90deg);"; break;
                    case 3: image.style.cssText = "-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform:rotate(180deg);-o-transform:rotate(180deg);"; break;
                    case 4: image.style.cssText = "-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);transform:rotate(270deg);-o-transform:rotate(270deg);"; break;
                }
            }
        } 
    </script> 
      

  2.   

    <html>
    <head>
    </head>
    <body>
        <div style="text-align:center;"><input type=button value="旋转图片" onclick="rotate(document.getElementById('_picview'));"/></div>
            <div>
                <img src="http://imgsrc.baidu.com/forum/pic/item/4d2a62d0f703918f7b682dac503d269759eec42c.jpg"  id="_picview" width=680 height=860/>
            </div>
    </body>
    </html>
    <script language="javascript">
        var i = 1;
        function rotate(image) {
            var object = image.parentNode;
            i++;
            if (i > 4) { i = 1 };
            if (new FileReader()) {
                switch(i)
                {
                    case 1: image.style.cssText = "-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform:rotate(0deg);-o-transform:rotate(0deg);"; break;
                    case 2: image.style.cssText = "-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform:rotate(90deg);-o-transform:rotate(90deg);"; break;
                    case 3: image.style.cssText = "-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform:rotate(180deg);-o-transform:rotate(180deg);"; break;
                    case 4: image.style.cssText = "-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);transform:rotate(270deg);-o-transform:rotate(270deg);"; break;
                }
            } else {
                image.style.filter = "progid:dXImagetransform.Microsoft.basicImage(rotation=" + i + ")";
            }
        } 
    </script> 
      

  3.   

    把上面的if (new FileReader()) 换成if (FileReader)，节省了资源
      

  4.   

    好吧，我承认语法上还有问题，应该是：
    <html>
    <head>
    </head>
    <body>
        <div style="text-align:center;"><input type=button value="旋转图片" onclick="rotate(document.getElementById('_picview'));"/></div>
            <div>
                <img src="http://imgsrc.baidu.com/forum/pic/item/4d2a62d0f703918f7b682dac503d269759eec42c.jpg"  id="_picview" width=680 height=860/>
            </div>
    <script language="javascript">
        var i = 1;
        function rotate(image) {
            var object = image.parentNode;
            i++;
            if (i > 4) { i = 1 };
            if (typeof(FileReader) !== "undefined") {
                switch(i)
                {
                    case 1: image.style.cssText = "-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform:rotate(0deg);-o-transform:rotate(0deg);"; break;
                    case 2: image.style.cssText = "-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);transform:rotate(90deg);-o-transform:rotate(90deg);"; break;
                    case 3: image.style.cssText = "-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform:rotate(180deg);-o-transform:rotate(180deg);"; break;
                    case 4: image.style.cssText = "-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg);transform:rotate(270deg);-o-transform:rotate(270deg);"; break;
                }
            } else
                image.style.filter = "progid:dXImagetransform.Microsoft.basicImage(rotation=" + i + ")";
        } 
    </script> 
    </body>
    </html>