<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style>#id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;}
#id_span3{font-size:10px;font-family:tahoma;}#idDiv{width:290px;text-align:left;padding:6px;background-color:#000000;font-family:tahoma,Arial;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod="auto expand");}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}</style>
<script>
var sFilter="filter : progid:DXImageTransform.Microsoft.Matrix(";  
var fM11,fM12,fM21,fM22,fDx,fDy,sType,sMethod;
var oDiv,oCodeDiv,oTxtRotation,oBtnRotation;
var i=0;function rdl_SetRotation(deg) {
var deg2rad=Math.PI*2/360;
rad=deg*deg2rad;
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
with (oDiv.filters.item(0)) {
M11=costheta;M12=-sintheta;M21=sintheta;M22=costheta;
}
rdl_UpdateMatrix();
}function rdl_DoAnimation(){
oDiv.onfilterchange=rdl_DoAnimation;
i+=5;
if (i>359) {
i=0;
oDiv.onfilterchange=null;
}
rdl_SetRotation(i);
}function rdl_UpdateMatrix() {
with (oDiv.filters.item(0)) {
fM11=Math.round(M11*10)/10;fM12=Math.round(M12*10)/10;fM21=Math.round(M21*10)/10;fM22=Math.round(M22*10)/10;
fDx=Math.round(Dx*10)/10;fDy=Math.round(Dy*10)/10;sType=FilterType;sMethod=SizingMethod;
}
oCodeDiv.innerText=sFilter+"SizingMethod="+sMethod+",FilterType="+sType+",Dx="+fDx+",Dy="+fDy+",M11="+fM11+",M12="+fM12+",M21="+fM21+",M22="+fM22+");";
}function rdl_Load(e){
oDiv=document.all("idDiv");
oCodeDiv=document.all("idCodeDiv");
oTxtRotation=document.all("idTxtRotation");  //输入框对象付给oTxtRotation
oBtnRotation90=document.all("idBtnRotation90");
oBtnRotation90.onclick=new Function("rdl_SetRotation(90);");
oBtnRotation270=document.all("idBtnRotation180");
oBtnRotation270.onclick=new Function("rdl_SetRotation(180);");
oBtnRotation270=document.all("idBtnRotation270");
oBtnRotation270.onclick=new Function("rdl_SetRotation(270);");rdl_UpdateMatrix();
}function rdl_DoHFlip(e){
with (oDiv.filters.item(0)) {M11=0-M11;M12=0-M12;}
rdl_UpdateMatrix();
}function rdl_DoVFlip(e){
with (oDiv.filters.item(0)) {M21=0-M21;M22=0-M22;}
rdl_UpdateMatrix();
}
window.onload=rdl_Load;
</script>
</head>
<body>
<div id=idParentDiv>
<div id=idDiv align="center">
<img src="http://img1n.soufun.com/bbs/2006_09/21/1158823498177.jpeg" width="290" height="290">
</div>
</div>
<br>
<table>
<tr>
<td>
<input type=button value="水平反转" onClick="rdl_DoHFlip();">
<input type=button value="垂直反转" onClick="rdl_DoVFlip();">
<input id=idBtnRotation90 type=button value="旋转90度">
<input id=idBtnRotation180 type=button value="旋转180度">
<input id=idBtnRotation270 type=button value="旋转270度">
</td>
</tr>
</table>
</body>
</html>