IE8中的Javascript/css

我遇到的问题是在IE中旋转图像（精确地说是时钟指针）。下面的脚本在一定程度上起作用（实际上正在进行动画），但它完全偏离轴旋转

我绝对不是Javascript/Jquery的天才，在IE8中如何正确地实现这一点时，我有点不知所措

代码如下：

(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)";
        var rad = Math.PI/180 * sdegree,
            cos = Math.cos(rad),
            sin = Math.sin(rad);
        jQuery(_this).find(".sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "-ms-transform" : srotate,
                                        'filter': "progid:DXImageTransform.Microsoft.Matrix(M11="+cos+", M12="+(-sin)+", M21="+sin+", M22="+cos+", SizingMethod='auto expand')"});
      }
      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)";
        var rad = Math.PI/180 * hdegree,
            cos = Math.cos(rad),
            sin = Math.sin(rad);
        jQuery(_this).find(".hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "-ms-transform" : hrotate,
                                         'filter': "progid:DXImageTransform.Microsoft.Matrix(M11="+cos+", M12="+(-sin)+", M21="+sin+", M22="+cos+", SizingMethod='auto expand')"});
      }
      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)";
        var rad = Math.PI/180 * mdegree,
            cos = Math.cos(rad),
            sin = Math.sin(rad);
        jQuery(_this).find(".min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "-ms-transform" : mrotate,
                                        'filter': "progid:DXImageTransform.Microsoft.Matrix(M11="+cos+", M12="+(-sin)+", M21="+sin+", M22="+cos+", SizingMethod='auto expand')"});                
      }
      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;
};

（函数（jQuery）
{
jQuery.fn.clock=函数（选项）
{
var默认值={
偏移量：'+0'，
类型：“模拟”
};
var_this=这个；
var opts=jQuery.extend（默认值、选项）；
setInterval（函数（）{
var seconds=jQuery.calcTime（opts.offset.getSeconds（）；
if（opts.type==“模拟”）
{
var sdegree=秒*6；
var srotate=“旋转（“+sdegree+”deg）”；
var rad=Math.PI/180*sdegree，
cos=数学cos（rad），
sin=数学sin（rad）；
jQuery（_this）.find（“.sec”）.css（{“-moz-transform”：srotate，“-webkit-transform”：srotate，“-ms-transform”：srotate，
'过滤器'：“progid:DXImageTransform.Microsoft.Matrix（M11=“+cos+”，M12=“+（-sin）+”，M21=“+sin+”，M22=“+cos+”，SizingMethod='auto expand'）”）”；
}
其他的
{
jQuery（_this.find（“.sec”）.html（秒）；
}
}, 1000 );
setInterval（函数（）{
var hours=jQuery.calcTime（opts.offset.getHours（）；
var mins=jQuery.calcTime（opts.offset.getMinutes（）；
if（opts.type==“模拟”）
{
var hdegree=小时*30+（分钟/2）；
var hrotate=“旋转（“+hdegree+”deg）”；
var rad=Math.PI/180*hdegree，
cos=数学cos（rad），
sin=数学sin（rad）；
jQuery（_this）.find（“.hour”）.css（{“-moz transform”：hrotate，“-webkit transform”：hrotate，“-ms transform”：hrotate，
'过滤器'：“progid:DXImageTransform.Microsoft.Matrix（M11=“+cos+”，M12=“+（-sin）+”，M21=“+sin+”，M22=“+cos+”，SizingMethod='auto expand'）”）”；
}
其他的
{
jQuery（_this.find（“.hour”）.html（hours+”：'）；
}
var meridiem=hours检查此示例：
这是正在进行的IE

createLine: function(x1, y1, x2, y2, options){

              // Check if browser is Internet Exploder ;)
              var isIE = navigator.userAgent.indexOf("MSIE") > -1;
              if (x2 < x1){
                var temp = x1;
                x1 = x2;
                x2 = temp;
                temp = y1;
                y1 = y2;
                y2 = temp;
              }
              var line = document.createElement("div");
              line.className = "global_dashboard_line";

              // Formula for the distance between two points
              // http://www.mathopenref.com/coorddist.html
              var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));

              line.style.width = length + "px";
              line.style.borderColor = options.color;
              line.style.zIndex = options.zindex;
              line.style.borderWidth = options.stroke + " 0px 0px 0px";

              if(isIE){
                line.style.top = (y2 > y1) ? y1 + "px" : y2 + "px";
                line.style.left = x1 + "px";
                var nCos = (x2-x1)/length;
                var nSin = (y2-y1)/length;
                line.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + nCos + ", M12=" + -1*nSin + ", M21=" + nSin + ", M22=" + nCos + ")";
              }else{
                var angle = Math.atan((y2-y1)/(x2-x1));
                line.style.top = y1 + 0.5*length*Math.sin(angle) + "px";
                line.style.left = x1 - 0.5*length*(1 - Math.cos(angle)) + "px";
                line.style.MozTransform = line.style.WebkitTransform = line.style.OTransform= "rotate(" + angle + "rad)";
              }
              return line;
            }
    }

createLine:函数（x1、y1、x2、y2、选项）{
//检查浏览器是否为Internet Explorer；）
var isIE=navigator.userAgent.indexOf（“MSIE”）>-1；
if（x2y1）？y1+“px”：y2+“px”；
line.style.left=x1+“px”；
var nCos=（x2-x1）/长度；
var nSin=（y2-y1）/长度；
line.style.filter=“progid:DXImageTransform.Microsoft.Matrix（sizingMethod='auto expand'，M11=“+nCos+”，M12=“+-1*nSin+”，M21=“+nSin+”，M22=“+nCos+”）；
}否则{
变量角度=数学常数（（y2-y1）/（x2-x1））；
line.style.top=y1+0.5*长度*数学sin（角度）+“px”；
line.style.left=x1-0.5*长度*（1-数学cos（角度））+“px”；
line.style.MozTransform=line.style.webkittTransform=line.style.OTransform=“旋转（“+角度+”弧度）”；
}
回流线；
}
}

这是我为在html元素中绘制线条而制作的插件的一个功能…它对斜线使用旋转。如果要检查整个插件，请转到：
检查此示例：
这是正在进行的IE

createLine: function(x1, y1, x2, y2, options){

              // Check if browser is Internet Exploder ;)
              var isIE = navigator.userAgent.indexOf("MSIE") > -1;
              if (x2 < x1){
                var temp = x1;
                x1 = x2;
                x2 = temp;
                temp = y1;
                y1 = y2;
                y2 = temp;
              }
              var line = document.createElement("div");
              line.className = "global_dashboard_line";

              // Formula for the distance between two points
              // http://www.mathopenref.com/coorddist.html
              var length = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));

              line.style.width = length + "px";
              line.style.borderColor = options.color;
              line.style.zIndex = options.zindex;
              line.style.borderWidth = options.stroke + " 0px 0px 0px";

              if(isIE){
                line.style.top = (y2 > y1) ? y1 + "px" : y2 + "px";
                line.style.left = x1 + "px";
                var nCos = (x2-x1)/length;
                var nSin = (y2-y1)/length;
                line.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=" + nCos + ", M12=" + -1*nSin + ", M21=" + nSin + ", M22=" + nCos + ")";
              }else{
                var angle = Math.atan((y2-y1)/(x2-x1));
                line.style.top = y1 + 0.5*length*Math.sin(angle) + "px";
                line.style.left = x1 - 0.5*length*(1 - Math.cos(angle)) + "px";
                line.style.MozTransform = line.style.WebkitTransform = line.style.OTransform= "rotate(" + angle + "rad)";
              }
              return line;
            }
    }

createLine:函数（x1、y1、x2、y2、选项）{
//检查浏览器是否为Internet Explorer；）
var isIE=navigator.userAgent.indexOf（“MSIE”）>-1；
if（x2y1）？y1+“px”：y2+“px”；
line.style.left=x1+“px”；
var nCos=（x2-x1）/长度；
var nSin=（y2-y1）/长度；
line.style.filter=“progid:DXImageTransform.Microsoft.Matrix（sizingMethod='auto expand'，M11=“+nCos+”，M12=“+-1*nSin+”，M21=“+nSin+”，M22=“+nCos+”）；
}否则{
变量角度=数学常数（（y2-y1）/（x2-x1））；
line.style.top=y1+0.5*长度*数学sin（角度）+“px”；
line.style.left=x1-0.5*长度*（1-数学cos（角度））+“px”；
line.style.MozTransform=line.style.webkittTransform=line.style.OTransform=“旋转（“+角度+”弧度）”；
}
回流线；
}
}

这是我为在html元素中绘制线条而制作的插件的一个功能…它使用旋转来绘制线条
(function ($) {
    $.fn.clock = function (options) {
        var self = this,
            el,
            msie8 = (/(msie) ([\w.]+)/i).test(navigator.userAgent),
            defaults = {
                offset: "+0"
            },
            opts = $.extend(defaults, options),
            calcTime = function (offset) {
                var d = new Date(),
                    utc = d.getTime() + (d.getTimezoneOffset() * 60000),
                    nd = new Date(utc + (3600000 * offset));
                return nd;
            },
            rotate = function (o, degree) {
                var rotate = "rotate(" + degree + "deg)",
                    rad, cos, sin, w, h;

                if (o.cur === degree) {
                    return;
                }
                o.cur = degree;

                if (msie8) {
                    rad = (degree * Math.PI) / 180;
                    cos = Math.cos(rad);
                    sin = Math.sin(rad);

                    o.el.css({
                        'filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11 = ' + cos + ', M12 = ' + (-sin) + ', M21 = ' + sin + ', M22 = ' + cos + ')'
                    });

                    w = o.el.width(); // obtain element sizes again
                    h = o.el.height();
                    o.el.css({
                        "marginLeft": -Math.round((w - o.w) / 2),
                        "marginTop": -Math.round((h - o.h) / 2)
                    });
                }
                else {
                    o.el.css({
                        "-moz-transform": rotate,
                        "-webkit-transform": rotate,
                        "-ms-transform": rotate,
                        "-sand-transform": rotate
                    });
                }
            };


        // store elements and sizes
        el = $(self).children(".sec");
        opts.sec = { el: el, w: el.width(), h: el.height(), cur: null };
        el = $(self).children(".hour");
        opts.hour = { el: el, w: el.width(), h: el.height(), cur: null };
        el = $(self).children(".min");
        opts.min = { el: el, w: el.width(), h: el.height(), cur: null };

        setInterval(function () {
            var time = calcTime(opts.offset),
                hours = time.getHours(),
                mins = time.getMinutes(),
                seconds = time.getSeconds(),
                degree;

            // hours
            degree = hours * 30 + (mins / 2);
            rotate(opts.hour, degree);

            // minutes
            degree = mins * 6;
            rotate(opts.min, degree);

            // seconds
            degree = seconds * 6;
            rotate(opts.sec, degree);
        }, 1000);
    };
})($);


$("#analog-clock").clock();