2

我正在使用 JavaScript 构建一个模拟时钟,我知道如果我使用 jQuery 来做会容易得多,但这里不是一个选项。

一切都在 Chrome 和 Safari(意思是 webkit 浏览器)中运行,但在其他任何一个中都没有。

这是我的tick方法,基本上是根据时间旋转图像。

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: (" + deg + "deg);"
      + "-o-transform: (" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "filter:progid:DXImageTransform.Microsoft.BasicImage(" + deg + "deg);"
    ); 
}

有什么建议让它发挥作用吗?

4

1 回答 1

3

IE语法中rotate-moz-and-o-属性你没用过rotation

function tick(deg, elmt){
document.getElementById(elmt).setAttribute(
        "style", "transform:rotate(" + deg + "deg);"
      + "-moz-transform: rotate(" + deg + "deg);"
      + "-o-transform: rotate(" + deg + "deg);"
      + "-webkit-transform:rotate(" + deg + "deg);"
      + "-ms-transform:rotate("+ deg +"deg);"
    ); 
}

演示在http://jsfiddle.net/gaby/fjHHX/3/


更新

更改了代码以支持 IE9-ms-扩展并删除了filter不允许任意旋转的代码(仅 0、90、180、270 度)..

为了支持 IE 版本 8 及以下版本,您可以使用矩阵转换,但它会变得丑陋.. 查看 http://css3please.com/ 的部分.box_rotate查看
http://www.boogdesign.com/examples/ 的源代码transforms/matrix-calculator.html如何做到这一点

于 2011-11-24T09:49:49.377 回答