Javascript适用于Firefox,Chrome和Safari,但不适用于IE浏览器
问题描述:
正如标题所述。我有两个动画时钟,这是根本不移动在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
正常工作,如果有人能请纠正的错误后,我方式,它将不胜感激。
编辑,以仅根据时钟动画问题
答
谈论IE而已,它始终只是缺了点什么或其它字符引起的,它看起来一个分号鼠标悬停后失踪结合:
$('.navlinks img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
});
+0
好了,我已经添加了缺失的分号 - 不幸的是它仍然不能正常工作 – Plastika 2012-03-28 03:19:30
答
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')";
显示什么错误? – 2012-03-28 03:10:10
你在script标签上使用了什么@type属性? – brianary 2012-03-28 03:14:03
@brianary