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’代表自动扩展到新的边界。
使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。
使用此滤镜可以建立下列效果:
左右反转。将M11和M12的值取负。 上下反转。将M21和M22的值取负。 改变尺寸。将M11和M12和M21和M22的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。 使用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>
- Javascript使div旋转倾斜 Matrix
- IE8 div旋转 Matrix
- 简单的学习Matrix的缩放,平移,旋转,倾斜
- Android matrix偏移(平移),旋转,缩放,倾斜的原理
- [Android]android.graphics.Camera实现图像的旋转、缩放,配合Matrix实现图像的倾斜
- android.graphics.Camera实现图像的旋转、缩放,配合Matrix实现图像的倾斜
- android.graphics.Camera实现图像的旋转、缩放,配合Matrix实现图像的倾斜
- android中的matrix的简单应用--translate(平移),rotate(旋转),scale(缩放)和skew(倾斜)
- Android图片旋转,缩放,位移,倾斜,对称完整示例(二)——Bitmap.createBitmap()和Matrix
- [Android]android.graphics.Camera实现图像的旋转、缩放,配合Matrix实现图像的倾斜
- 使用Matrix倾斜图像
- Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix
- Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix
- Android图片旋转,缩放,位移,倾斜,对称完整示例(一)——imageView.setImageMatrix(matrix)和Matrix .
- opencv实现旋转+倾斜
- Textview 文本旋转,倾斜
- Textview 文本旋转,倾斜,textview倾斜
- Android 图形:绘制渐变色奥运五环图形,游戏文字,验证码,Matrix旋转,缩放,倾斜,平移等
- NYOJ 180 挑剔的小杜
- 在Ubuntu 11.04 下面,Mplayer安装
- Java枚举实现单例模式
- cs61a课程总结--lecture7 递归(和一种数据结构)
- 查找增强的方法
- Javascript使div旋转倾斜 Matrix
- POJ2996--Help Me with the Game(模拟题)
- hibernate学习之Hibernate API
- 折腾开源WRT的AC无线路由之路-2
- STM32F4读写内部FLASH【使用库函数】
- visio中制作的图粘贴到word中再裁剪边缘的方法
- JAVA中字符串(\)、(\\)、(/)之间的替换
- Win7下IIS报503Service Unavailable错误的解决
- Ubuntu14.04搭建Robocup2D仿真平台的一些问题处理方法