在Internet Explorer中旋轉鍾針

我正在嘗試使用jQuery創建一個時鐘。我可以旋轉所有的小時，分鍾和秒針，但在使用IE瀏覽器進行旋轉時會遇到一些問題，就像在其他瀏覽器中一樣。在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一切

來源

2013-04-07 Dead Man

我已將您的代碼移到您的問題中。請_always_這樣做。一個jsFiddle鏈接是有幫助的，但你應該總是把代碼放在問題中。其次，請不要隨意突出單詞。您的問題中沒有任何代碼，因此不要將代碼標記爲代碼。 jQuery是好的....而不是'jQuery'等 – Ben 2013-04-08 12:16:22

你沒有說什麼是您在IE時鐘精確的錯誤 - 在這版本的IE。

如果我在網頁上繪製模擬時鐘，我可能會使用SVG。

IE6-8不支持SVG，所以如果您需要支持，我會使用Raphaël JS庫。它在可用的位置創建SVG，並在IE6-8上回退到專有的VML。看看他們的網站，他們有很酷的例子，包括一個有趣的極地時鐘（同心圓）。

下面是一篇文章，解釋了您試圖達到的目標：在Raphael上完成的模擬時鐘：Analog clock without images，帶有幀和小時刻度標記。

來源

2013-06-02 16:21:56 jods

感謝它的魅力。非常感謝。 – 2013-06-04 07:28:32

IE 8,7，...不支持CSS旋轉

來源

2013-04-07 08:35:08 kidwon

是否有任何其他方式旋轉它？ – 2013-04-07 08:36:23

有點看看那篇文章：http://www.aquim.com/web-article-226.html。搜索Google for'在IE8上輪換'有一些框架可能支持它 – kidwon 2013-04-07 08:38:49

你有兩種選擇：

你可以運行到一個jQuery插件，它處理跨瀏覽器的腐爛您可以在Google中輕鬆找到一個。或者，您可能會對微軟矩陣變換感興趣：http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx，您將不得不瞭解什麼是2 * 2旋轉矩陣以及如何計算它的項。這並不複雜。與css3旋轉的區別在於，旋轉中心默認爲元素的左上角，您可能需要使用邊距。如果你選擇了第二種方案

所以：對於IE 9和10，使用-ms變換使用CSS3旋轉功能的規則，併爲他人IE，微軟矩陣使用過濾規則。您可以使用Modernizr檢測csstransforms功能，並使用css父條件將css類.csstranforms和.no-csstransformsMdernizr添加到onload中。

來源

2013-04-07 08:49:17 lib3d

你可以嘗試使用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>
火狐2.0>
的Safari 3>
歌劇9>
谷歌瀏覽器

Check it here.

來源

2013-05-28 10:43:39

謝謝。我會檢查它，並會讓你知道。 – 2013-05-28 10:45:03

讓我現在，如果它適合你:) – 2013-05-28 10:46:24

當然，我會讓你知道。 – 2013-05-28 10:47:30

可以使用canvas元素旋轉時鐘指針，它會在IE7的工作+ 8，如果你有excanvas，一個插件，使畫布舊版本的IE。

IE 9和10已經支持canvas。

工作演示：http://jsfiddle.net/w1ll3m/qVqUb/4/（使用coolclock插件）。只要確保excanvas只加載如果IE ：

可以使用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>

來源

2013-05-28 14:00:14 Willem

感謝您的幫助。我會檢查它，並會讓你知道。 – 2013-05-29 06:14:09

嘿，我查了一下。它在Internet Explorer 7中工作，但不在Internet Explorer 8中。你能幫我解決嗎？ – 2013-05-29 12:05:42

添加一個窗口加載事件將其固定在IE8中。 ''window.load = function（）{CoolClock.findAndCreateClocks（）;}'或jQuery：'$（function（）{CoolClock.findAndCreateClocks（）;}）;' – Willem 2013-05-29 12:18:18

其實你的問題是關於在I.E中畫css行。

這篇文章可以幫助：

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

來源

2013-06-03 10:18:04 GameAlchemist

您可以使用jquery transit插件，使任何類型的過渡效果，包括旋轉。這是一個輕量級的插件，有很多選擇。改變旋轉中心。你可以在下面使用transformOrigin。

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

來源

2013-06-04 01:22:45

在Internet Explorer中旋轉鍾針

回答

相關問題