2012-03-28 161 views
0

正如标题所述。我有两个动画时钟,这是根本不移动在IE8 有什么我在这里是错过的,这是影响在IE浏览器中的动画?Javascript适用于Firefox,Chrome和Safari,但不适用于IE浏览器

钟:

(function(jQuery) 
{ 
    jQuery.fn.clock = function(options) 
    { 
    var defaults = { 
     offset: '+0', 
     type: 'analog' 
    }; 
    var _this = this; 
    var opts = jQuery.extend(defaults, options); 

    setInterval(function() { 
     var seconds = jQuery.calcTime(opts.offset).getSeconds(); 
     if(opts.type=='analog') 
     { 
     var sdegree = seconds * 6; 
     var srotate = "rotate(" + sdegree + "deg)"; 
     jQuery(_this).find(".sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform" : srotate}); 
     } 
     else 
     { 
     jQuery(_this).find(".sec").html(seconds); 
     } 
    }, 1000); 

    setInterval(function() { 
     var hours = jQuery.calcTime(opts.offset).getHours(); 
     var mins = jQuery.calcTime(opts.offset).getMinutes(); 
     if(opts.type=='analog') 
     { 
     var hdegree = hours * 30 + (mins/2); 
     var hrotate = "rotate(" + hdegree + "deg)"; 
     jQuery(_this).find(".hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "-ms-transform" : hrotate}); 
     } 
     else 
     { 
     jQuery(_this).find(".hour").html(hours+':'); 
     } 
     var meridiem = hours<12?'AM':'PM'; 
     jQuery(_this).find('.meridiem').html(meridiem); 
    }, 1000); 

    setInterval(function() { 
     var mins = jQuery.calcTime(opts.offset).getMinutes(); 
     if(opts.type=='analog') 
     { 
     var mdegree = mins * 6; 
     var mrotate = "rotate(" + mdegree + "deg)";   
     jQuery(_this).find(".min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "-ms-transform" : mrotate});     
     } 
     else 
     { 
     jQuery(_this).find(".min").html(mins+':'); 
     } 
    }, 1000); 
    } 
})(jQuery); 


jQuery.calcTime = function(offset) { 
    d = new Date(); 
    utc = d.getTime() + (d.getTimezoneOffset() * 60000); 
    nd = new Date(utc + (3600000*offset)); 
    return nd; 
}; 

上面的代码是我在网上找到远花向多的时间试图让excanvas在IE

正常工作,如果有人能请纠正的错误后,我方式,它将不胜感激。

编辑,以仅根据时钟动画问题

+1

显示什么错误? – 2012-03-28 03:10:10

+0

你在script标签上使用了什么@type属性? – brianary 2012-03-28 03:14:03

+0

@brianary

1

IE不支持transform属性(仅限IE9 +)。如果你在IE 9的工作,你可以添加此-ms-transform

.css({ 
"-moz-transform" : mrotate, 
"-webkit-transform" : mrotate, 
"-ms-transform" : mrotate 
}); 

对于IE8这是一个有点复杂。你必须使用旋转矩阵例如

// convert to radian first 
var rad = Math.PI/180 * sdegree, 
    cos = Math.cos(rad), 
    sin = Math.sin(sin); 

'-ms-filter': "progid:DXImageTransform.Microsoft.Matrix(M11="+cos+", M12="+(-sin)+", M21="+sin+", M22="+cos+", SizingMethod='auto expand')"; 
+0

感谢你的支持,我已经添加了原来的文章 - 是否有其他方式可以让我可以使用IE 8并可能在下面工作? – Plastika 2012-03-28 03:28:19

+0

@Plastika我更新了答案,以包括IE8解决方案 – Rezigned 2012-03-28 04:23:21

+0

再次感谢 - 现在复杂的部分在每个时钟手上实现这一点..如果可以纠缠你一点点的帮助,因为我在边缘大脑崩溃! – Plastika 2012-03-28 06:11:29

相关问题