IE8中的Javascript / css

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

我绝不是一个使用Javascript / Jquery的wiz，并且在解决如何在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元素中绘制线条的插件的function……它使用旋转来表示斜线。 如果你想查看整个插件，请访问： https ： //github.com/tbem/jquery.line

Answer 2

这适用于所有浏览器，包括IE8： http ： //jsfiddle.net/SrSus/26/show/

HTML

使用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 - ow) / 2), "marginTop": -Math.round((h - oh) / 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();