在Internet Explorer中旋转时钟指针

Question

我正在尝试使用jQuery创建一个时钟.我可以旋转所有的小时,分​​钟和秒针,但是在使用Internet Explorer时完全旋转它有一些问题,就像在其他浏览器中一样.

为什么会这样？如何像在其他浏览器中一样在Internet Explorer中旋转时钟指针？

这是我到目前为止创建的:

$(document).ready(function(){
    var every_second = 1000;
    var every_minute = 60000;
    var every_twelve_minute = 60000;

    setInterval(rotateSeconds,every_second);
    setInterval(rotateMinutes,every_minute);
    setInterval(rotateHours,every_twelve_minute);
});

var seconds_angle = 0;
function rotateSeconds() {
    var element = $(".seconds");
    if(seconds_angle < 360) {
        seconds_angle = seconds_angle+5;
    }
    else {
        seconds_angle = 0;
    }
    element.rotate(seconds_angle);
}

var minutes_angle = 0;
function rotateMinutes() {
    var element = $(".minutes");
    if(minutes_angle < 360) {
        minutes_angle = minutes_angle+5;
    }
    else {
        minutes_angle = 0;
    }
    element.rotate(minutes_angle);
}

var hours_angle = 0;
function rotateHours() {
    var element = $(".hours");
    if(hours_angle < 360) {
        hours_angle = hours_angle+1.25;
    }
    else {
        hours_angle = 0;
    }
    element.rotate(hours_angle);
}

这里是一个jsFiddle链接到一切

Answer 1

你有两个选择:

• 你可以运行一个jQuery插件来处理跨浏览器旋转,你很容易在谷歌中找到一个.

• 或者,你可能会对微软矩阵变换感兴趣:http://msdn.microsoft.com/en-us/library/ms533014(v = vs.85).aspx,你将不得不学习什么是2*2旋转矩阵及其术语必须如何计算.这并不复杂.与css3旋转的区别在于旋转中心默认为元素的左上角,您可能必须使用边距.

因此,如果您选择第二个解决方案:对于IE 9和10,请使用带有css3旋转功能的-ms-transform规则,对于其他IE,请使用带有Microsoft矩阵的过滤规则.您可以使用Modernizr来检测csstransforms功能并使用css父条件和css类.csstranforms和.no-csstransformsMdernizr添加onload.

Answer 2

IE 8,7,...不支持CSS旋转

Answer 3

你没有说明你的时钟在IE中的错误 - 以及在哪个版本的IE中.

如果我在网页上绘制模拟时钟,我可能会选择SVG.

IE6-8对SVG不支持,所以如果你需要支持,我会用拉斐尔JS库.它创建了可用的SVG,并在IE6-8上回退到专有的VML.看看他们的网站,他们有很酷的例子,包括一个有趣的极地时钟(同心圆).

这篇文章准确地解释了你想要实现的目标:在Raphael之上完成的模拟时钟:没有图像的模拟时钟,带有帧和小时刻度标记.