IE8中的Javascript / css [英] Javascript/css in IE8
本文介绍了IE8中的Javascript / css的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题我正在IE中旋转图像（时钟指针精确）。下面的脚本在一定程度上起作用（实际上有动画正在进行）但是它完全在轴外旋转。
Issue I am having is rotating an image (clock hands to be precise) in IE. The script below works to an extent (there is actually animation going on) but it's rotating completely off axis.
我绝不是一个使用Javascript / Jquery的wiz而且我是在IE8中如何正确地解决这个问题时有点失落。
I am by no means a wiz with Javascript/Jquery and am a bit lost when it comes to working out how to do this properly in 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;
};
推荐答案
这应适用于所有浏览器，包括IE8：< a href =http://jsfiddle.net/SrSus/26/show/ =nofollow> http://jsfiddle.net/SrSus/26/show/
This should work across all browsers, including 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();
这篇关于IE8中的Javascript / css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
