walterzorn 系列-旋转图像

作者:vkvi 来源:ITPOW(原创) 日期:2008-11-28

www.walterzorn.com 网站提供一些功能非常好的 JavaScript 封装,ITPOW以中文的形式介绍该网站的产品。

旋转图像

在网页上以任意角度旋转图像的 JavaScript 实验。

Walter Zorn

请单击此处在新窗口中打开演示页面,请注意,您的浏览器可能会变得很慢。

警告

这只是一个快速技巧,没前途的实验!!强烈建议不要在网站上使用这个库。

要让图像旋转,脚本内部用宽度乘高度个 DIV 元素进行图像重构(比如:629 个 DIV 重构 37px x 17px 的小图),每一个 DIV 元素都包含原始图像,但通过 clip 使每个 DIV 元素只显示需要的部分。

由于需要大量的 DIV 和图像拷贝,动态客户端 HTML 图像旋转总是会很慢,并且得限制为小图像-纵然这个库使用了很快的矩阵相乘算法。

下载

wz_rotateimg.js ver. 0.5 pre-alpha zip 压缩

wz_rotateimg.zip

包含到网站中

如果克制不住自己要使用这个库:每一个图像需要一个唯一的名称,比如:

<img name="newImg" src="newImg.gif" width="37" height="17">

然后插入下面的行到 HTML 源代码的最后一个图像,更好的是紧跟在 </body> 标签之前。

<script type="text/javascript" src="wz_rotateimg.js"></script>
<script type="text/javascript">
<--
SET_ROTATABLE("newImg",90,"winky",180);
//-->
</script>

逗号分隔开每一个参数,SET_ROTATABLE() 需要每一个图像的名称,后面加上以度为单位表现期望的初始角度。在 SET_ROTATABLE() 被调用后,可通过 rots 数组访问图像,如下表达式:

rots.nameOfImage 
或者
rots['nameOfImage'] 
或者这样也行
rots["nameOfImage"]

你可以随时按照下面的示例说明调用图像的 rotateTo() 方法:

rots.newImg.rotateTo(270); 
或者
rots["winky"].rotateTo(135);

(参见本页上方的可点击示例)。rotateTo() 需要以度为单位描述期望旋转角度的的参数。你可以使用图像的 angle 属性取得它的当前角度,按上面的示例:

rots.newImg.angle

 

相关文章