【问题标题】:Javascript rotation IE8Javascript旋转IE8
【发布时间】:2011-12-01 21:49:51
【问题描述】:

所以我在 google 和 stackoverflow 上搜索了一个解决方案,但我找不到答案。我的问题是我无法使用 Internet Explorer 8 旋转元素。 我用了 this sitethis stackoverflow topic作为资源,最终得出如下结果:

function rotateElement(e, deg) {
    var deg_str = deg + "";
    var rotate_transform = "rotate(" + deg + "deg)";

    var degreeToIEMatrix = function(deg){   
        var deg2radians = Math.PI / 180;
        var rad = deg * deg2radians ;
        var costheta = Math.cos(rad);
        var sintheta = Math.sin(rad);

        var M11 = costheta;
        var M12 = -sintheta;
        var M21 = sintheta;
        var M22 = costheta;

        return 'M11=' + M11 + ', M12=' + M12 + ', M21=' + M21 + ', M22=' + M22;
    };

   /* @cc_on
       matrix_str = degreeToIEMatrix(deg);
       document.write(matrix_str);
       filter_str = "progid:DXImageTransform.Microsoft.Matrix(" + matrix_str + ", sizingMethod='auto expand')";
   @*/

    e.style["rotation"] = deg_str + "deg";      // CSS3
    e.style.MozTransform = rotate_transform;    // Moz
    e.style.OTransform = rotate_transform;      // Opera
    e.style.WebkitTransform = rotate_transform; // Webkit/Safari/Chrome
    e.style["zoom"] = "1"; // ??? Probably IEs

    /* @cc_on
        e.style.filter = filter_str;            // IE 6/7
        e.style.MsFilter = filter_str;          // IE 8
    @*/
}

在 Internet Explorer 8 中,元素不会旋转。我的代码中是否有错误或者它是否很糟糕?我知道我可以为此使用 JQuery,但我不想依赖库。我查找了 JQuery 的来源,但在那里找不到答案。

【问题讨论】:

标签: javascript internet-explorer


【解决方案1】:
function rotate(angle, elem){
        if (angle >= 0) {
        var rotation = Math.PI * angle / 180;
    } else {
        var rotation = Math.PI * (360+angle) / 180;
    }
        var c = Math.cos(rotation),
        s = Math.sin(rotation);
       elem.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+c+",M12="+(-s)+",M21="+s+",M22="+c+",SizingMethod='auto expand')";
}

它只适用于 IE! ;)

【讨论】:

  • 嗯,我认为这与我的条件 cmets 有关:S 所以这实际上是一个很好的答案 :) 谢谢!
  • 你甚至不需要 if: 总是使用第二个分支。
  • 如果你这样做,使用这条线会更安全:var rotation = Math.PI * (360 + (angle % 360)) / 180;
猜你喜欢
  • 2012-11-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-04-04
  • 2013-01-04
  • 2011-12-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多