IE8 下面通過濾鏡的方式進行圖片旋轉

　　首先，為什么我會提出這樣的方式來進行操作呢？原因還是需求導致：

　　在做項目中，有這樣一個需求，在進行網頁中圖片查看的時候，需要對圖片的操作有支持旋轉和縮放這些操作，看似這樣的網上插件有很多，對！但是對於IE8 的支持都不行啊~~~因為雖然很多 插件可以在 IE8進行圖片旋轉，比如jquery的rotate.js 插件很好用，但是在IE8 下面進行旋轉之后，就不能在進行縮放了，因為它會自動生成一個固定大小的object 元素，我們就不能操作這個元素了！要不就是使用canvas, 但是我的需求是在旋轉了圖片之后，我還能對原生的 img 圖片進行大小變化等操作，以上的這些旋轉后，都不是原生的對象了.......

　　在進行了各種思想斗爭之后，沒有放棄，繼續尋找方法~在網上看到了 IE filter 濾鏡的方式來處理旋轉，我嘗試了一下，發現這樣旋轉之后，可以保留原生對象，很好~就打算用這樣的方式來處理IE8的兼容性問題了~

<div id="play" style="width:99%;height:99%;">
　　<img id="img" src="images/bg.jpg" alt="Alternate Text" />
</div>

 

//**********************   關於IE8 兼容性的處理，使用 IE濾鏡與圖片旋轉  START **********************
        function UseIE8()
        {
            var browser = navigator.appName
            var b_version = navigator.appVersion
            var version = b_version.split(";");
            var trim_Version = version[1].replace(/[ ]/g, "");
            if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
                return true;
            }
            else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
                return true;
            }
            else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
                return true;
            }
            return false;
        }
        function ro0() {
            $('#img').css({ filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)' });
        }
        //90度
        function ro1() {
            $('#img').css({ filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)' });
        }
        //180度
        function ro2() {
            $('#img').css({ filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)' });
        }
        //270度
        function ro3() {
            $('#img').css({ filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)' });
        }
        //IE8 旋轉參數
        var rotate_IE8 = 0;
        //**********************   關於IE8 兼容性的處理，使用 IE濾鏡與圖片旋轉  END  **********************

        var imgWidth = "auto";
        var imgHeight = "auto";
        var rotate = 0;
        var index = 0;
        var imgArry;
        //照片旋轉
        function rotateImg(size) {
            //如果使用的是 IE8 
            if (UseIE8()) {
                var res;
                if (size > 0) {
                    rotate_IE8++;
                } else {
                    rotate_IE8--;
                }
                res = rotate_IE8 % 4;//因為旋轉參數都是 0,1,2,3 的值，所以需要%
                if (res < 0)
                {
                    res += 4;
                }
                switch (res) {
                    case 0:
                        ro0();
                        break;
                    case 1:
                        ro1();
                        break;
                    case 2:
                        ro2();
                        break;
                    case 3:
                        ro3();
                        break;
                }
            } else {//其他瀏覽器正常使用 rotate.js 進行處理
                rotate += size;
                var img = $("#img");
                img.rotate(rotate);
            }
            //還原大小
            $("#img").width(imgWidth);
            $("#img").height(imgHeight);
        }

 //放大縮小圖片
        function imgToSize(size) {
            var img = $("#img");
            var oWidth = img.width(); //取得當前圖片的實際寬度
            var oHeight = img.height(); //取得當前圖片的實際高度
            if (size < 0 && (oWidth <= 120 || oHeight <= 120)) {
                return;
            }
            //IE8 特殊處理
            if (UseIE8()) {
                if (rotate_IE8 % 4 % 2 == 1) {
                    //對於IE8 ，旋轉次數奇數的時候 寬高互換
                    var t = oWidth;
                    oWidth = oHeight;
                    oHeight = oWidth;
                }
            }
            img.width(oWidth + size);
            img.height(oHeight + size / oWidth * oHeight);
        }