Javascript/css in IE8

Question

Problem, das ich habe, dreht ein Bild (Uhrzeiger, um genau zu sein) in IE. Das folgende Skript funktioniert bis zu einem gewissen Grad (es gibt tatsächlich eine Animation), aber es dreht sich komplett außerhalb der Achse.

Ich bin auf keinen Fall ein Wiz mit Javascript/Jquery und bin ein wenig verloren, wenn es darum geht, wie man das in IE8 richtig macht.

-Code unten:

(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; 
}; 

Answer 1

prüfen dieses Beispiel: Dies wird auf IE arbeitet ...

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; 
      } 
    } 

Dies ist eine Funktion von einem Plugin, das ich für das Zeichnen von Linien in einem html gemacht Element ... Es verwendet Rotationen für schräge Linien. Wenn Sie überprüfen möchten, gehen die gesamte Plugin: https://github.com/tbem/jquery.line

Answer 2

Dies sollte in allen Browsern, einschließlich IE8: http://jsfiddle.net/SrSus/26/show/

HTML

<ul id="analog-clock" class="analog"> 
    <li class="hour"></li> 
    <li class="min"></li> 
    <li class="sec"></li> 
    <li class="meridiem"></li> 
</ul> 

Javascript

(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();