Javascript使div旋转倾斜 Matrix

来源:互联网 发布:面板数据的固定效应 编辑:程序博客网 时间:2024/05/21 05:21

IE的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数,前四个参数需要自行计算三角函数,然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation),其中的rotation表示旋转角度,如果顺时针旋转7.5度,则rotation就为7.5;第五个参数SizingMethod表示重绘方式,’auto expand’代表自动扩展到新的边界
使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。
使用此滤镜可以建立下列效果:
左右反转。将M11M12的值取负。 上下反转。将M21M22的值取负。 改变尺寸。将M11M12M21M22的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。 使用padding属性能够使最终图像边角被剪切的机会降到最小。

这段代码有二个DIV第一个DIV主要是控制要旋转的哪个DIV的

<DIV style="WIDTH: 75px; POSITION: relative; TOP:200px; LEFT: 200px; HEIGHT: 75px">//这个DIV是要旋转DIV的父元素.父元素的TOP,LEFT是特别重要,可以修改这引属性发现问题,或者将这个属性移到旋转的元素上看效果;
      <DIV id=aDiv style="WIDTH: 70px; POSITION: absolute; HEIGHT: 70px">
            < IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图
      <DIV>
</DIV>
<SCRIPT language=javascript>
<!--
///创建和运用滤镜
function rotate(name, angle){
//将角度转变成弧度
var rad = degToRad(angle);
//计算弧度的cos和sin值
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
//创建对象
var el = document.getElementById(name);
if(el) {
//应用滤镜
el.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
 
//设置滤镜的属性值
el.filters.item("DXImageTransform.Microsoft.Matrix").SizingMethod = "auto expand";
el.filters.item("DXImageTransform.Microsoft.Matrix").FilterType = "bilinear";
//运用旋转滤镜
el.filters.item("DXImageTransform.Microsoft.Matrix").M11 = costheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M12 = -sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M21 = sintheta;
el.filters.item("DXImageTransform.Microsoft.Matrix").M22 = costheta;
}
}
//使角度转起来
var angle = 0;
function doRotate() {
//检查并确保角度值在0到360之间
if(angle>360) angle-=360;
//使角度增加
angle+=15;
//do rotation
rotate("aDiv",angle);
//定位旋转中心
var el = document.getElementById("aDiv")//C#中要马上设位置.
el.style.top = 25 - (el.offsetHeight/2);//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试
el.style.left = 25 - (el.offsetWidth/2);//父元素的宽度/2-旋转元素度/2

//循环
setTimeout("doRotate();",20);
}
//角度变弧度函数
var pi = Math.PI;
function degToRad(x) { return ( x/(360/(2*pi)) ); }
function radToDeg(x) { return ( x*(360/(2*pi)) ); }
doRotate()
//-->
</SCRIPT>

0 0
原创粉丝点击