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 link

Answer 1

您有两种选择：

你可以运行一个处理跨浏览器轮换的jQuery插件，你很容易在google中找到一个。
或者，您可能对微软矩阵变换感兴趣：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，所以如果你需要支持，我会使用Raphaël JS库。它创建了可用的SVG，并在IE6-8上回退到专有的VML。看看他们的网站，他们有很酷的例子，包括一个有趣的极地时钟（同心圆）。

这篇文章准确地解释了你想要实现的目标：在Raphael之上完成的模拟时钟：Analog clock without images，带有框架和小时刻度标记。

Answer 4

您可以尝试使用可以为您处理跨浏览器的jQuery Rotate plugin，您只需要使用它进行轮播：

$('#myImage').rotate(30) //for a 30 degree rotation Where #myImage is the id of the element you want rotated.

以下浏览器支持：

Internet Explorer 6.0＆gt;
Firefox 2.0＆gt;
Safari 3＆gt;
Opera 9＆gt;
Google Chrome

Check it here.

Answer 5

您可以使用canvas元素来旋转时钟指针，如果您包含excanvas，这是一个在旧版IE中启用画布的插件，它将在IE7 + 8中运行。

IE 9和10已经支持画布。

工作演示：http://jsfiddle.net/w1ll3m/qVqUb/4/（使用coolclock插件）。只要确保只有IE＆lt; 9 with conditional comments：

才会加载excanvas

您可以使用coolclock插件或编程自己的时钟。

jsfiddle网站本身在IE 7/8中不起作用。将以下代码复制到html文件中，然后在IE中打开并运行：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>
  <script type='text/javascript' 
    src='http://code.jquery.com/jquery-1.6.4.js'></script> 
  <script type='text/javascript' 
    src="http://randomibis.com/coolclock/coolclock.js"></script>
  <script type='text/javascript'>
  $(window).load(function(){
    CoolClock.config.skins = {skin1:{
    outerBorder:
      {lineWidth:2, radius:95, color:"black", alpha:1 },
    smallIndicator:
      {lineWidth:2, startAt:88, endAt:92,color:"black", alpha:1 },
    largeIndicator:
      {lineWidth:4, startAt:79, endAt:92, color:"black", alpha:1 },
    hourHand:
      {lineWidth:8, startAt:-15,endAt:50, color:"black", alpha:1 },
    minuteHand:
      {lineWidth:7, startAt:-15, endAt:75, color:"black", alpha:1 },
    secondHand:
      {lineWidth:1, startAt:-20, endAt:85, color:"red", alpha:1 },
    secondDecoration:
      {lineWidth:1,startAt:70,radius:4,fillColor:"red",color:"red",alpha:1 }
}};
CoolClock.findAndCreateClocks();
});
</script>
<!--[if lt IE 9]>
  <script type="text/javascript" 
    src="http://randomibis.com/coolclock/excanvas.js"></script>
  <![endif]-->
</head>
  <body>
    <canvas id="clockid" class="CoolClock:skin1:200:false">
    </canvas>
  </body>
</html>

Answer 6

您可以使用jquery transit插件制作任何类型的过渡效果，包括旋转。它是一个轻量级插件，有很多选择。改变旋转中心。你可以在下面使用transformOrigin。

$('.box')
  .css({ transformOrigin: '0px 0px' })
  .transition({ rotate: '45deg' });

Answer 7

实际上你的问题是关于在I.E。中绘制css行。

这篇文章可能有所帮助：

http://www.ofdream.com/code/css/xline2.php

在Internet Explorer中旋转时钟指针

7 个答案: