IE 矩阵滤镜问题

g44062811 2013-06-19 10:07:53

我想用js做一个时钟，其他浏览器都可以，但ie要用滤镜，是在不会，数学又不行，就指教！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">

function zb(){

var d = new Date();
var h = d.getHours();
if(h>12){h-=12;}
var m = d.getMinutes();
var s = d.getSeconds();
//alert(h);
userAgent = navigator.userAgent,
isIE = /msie/i.test(userAgent) && !window.opera,
isWebKit = /webkit/i.test(userAgent),
isFirefox = /firefox/i.test(userAgent);
if (isWebKit) {
document.getElementById("sz").style.webkitTransform = "rotate(" + (h*30) + "deg)";
document.getElementById("fz").style.webkitTransform = "rotate(" + (m*6) + "deg)";
document.getElementById("mz").style.webkitTransform = "rotate(" + (s*6) + "deg)";
} else if (isFirefox) {
document.getElementById("sz").style.MozTransform = "rotate(" + (h*30) + "deg)";
document.getElementById("fz").style.MozTransform = "rotate(" + (m*6) + "deg)";
document.getElementById("mz").style.MozTransform = "rotate(" + (s*6) + "deg)";
// alert( document.getElementById("sz").style.MozTransform);
} else if (isIE) {

var hd=h*30;
var md=m*6;
var sd=s*6;

sds = sd / 180 * Math.PI;
var sins = Math.sin(sds);
var coss = Math.cos(sds);
var W=((sins*226)+(coss*12))/2;

var H=((sins*12)+(coss*226))/2;

//alert(document.getElementById("mz").style.left);

//if(sd>0&&sd<=90){
// document.getElementById("mz").style.left=(213-W)+"px";
// document.getElementById("mz").style.marginTop=(114-H)+"px";
// }
// else if(sd>90&&sd<=180){
// document.getElementById("mz").style.left=(206-W)+"px";
// document.getElementById("mz").style.marginTop=(114+H)+"px";
// }
//

document.getElementById("mz").style.filter = "progid:DXImageTransform.Microsoft.Matrix(" +",M11=" + coss + ",M12=" + (-sins) + ",M21=" + sins + ",M22=" + coss + ",SizingMethod='auto expand')";

} else {
document.getElementById("sz").style.transform = "rotate(" + (h*30) + "deg)";
document.getElementById("fz").style.transform = "rotate(" + (m*6) + "deg)";
document.getElementById("mz").style.transform = "rotate(" + (s*6) + "deg)";
}
}
window.setInterval("zb()",1);

</script>
</head>

<body>
<div id="watch" style=" height:481px; width:422px; background:url(imgs/Clock_icon.png) no-repeat; position:relative;">
<div id="sz" style=" width:11px; height:198px; position:absolute; top:111px; left:207px; background:url(imgs/sz.png) no-repeat;"></div>
<div id="fz" style=" width:5px; height:290px; position:absolute; top:65px; left:210px; background:url(imgs/fz.png) no-repeat;"></div>
<div id="mz" style=" width:12px; height:226px; position:absolute; top:97px; left:206px; background:url(imgs/mz.png) no-repeat;"></div>
<div id="dz" style=" height:15px; width:15px; position:absolute; top:202px; left:205px; background:url(imgs/dz.png) no-repeat;"></div>
</div>
</body>
</html>

...全文