我遇到的问题是在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;
};
查看此示例：这是在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
这应该适用于所有浏览器，包括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();