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);
        }