Javascript/css в IE8

Question

Проблема, с которой я сталкиваюсь, поворачивает изображение (часы, если точнее) в 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; 
}; 

Answer 1

Проверьте этот пример: Это работает на 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; 
      } 
    } 

Это является функцией плагин, который я сделал для рисования линий в HTML элемент ... Он использует вращения для наклонных линий. если вы хотите проверить весь плагин пойти: https://github.com/tbem/jquery.line

Answer 2

Это должно работать во всех браузерах, включая 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();