使用Javascript旋转图像

时间:2010-10-18 02:21:33

标签: javascript jquery image transparency rotation

首先,我目前正在使用JQuery,因此JQuery解决方案可行。


我希望以每秒计算的动态X度旋转图像。

现在我使用此JqueryRotate plugin

完美地完成了这项工作

图像每秒都完美旋转。但我现在正在尝试一些更复杂的事情。

我想将4个透明图像相互叠加。目前我有四个<img>标签都正确对齐,看起来很漂亮^ _ ^但是使用前面提到的JqueryRotate插件强制重新绘制图像以使其旋转失去透明度,因此只显示最顶层的图像这显然不起作用。

那么,什么是一个好的库/插件或旋转图像的方式,同时保持透明度?*

必须适用于Opera,Safari,Chrome,Firefox和IE8 +

我希望不必为此包含另一个库,但如果需要,我将这样做以创建旋转4个图像的效果。提前谢谢。

4 个答案:

答案 0 :(得分:4)

Raphael 是一个很棒的库,适用于IE(使用VML)和其他浏览器(使用SVG)。它可以 rotate images 并处理透明度。

我不知道有任何其他方式来处理IE。 CSS解决方案非常简单,但它们在IE中不起作用。

另一种选择是 simulate image rotation with CSS sprites 示例执行模拟3d rotatoin,但2d也很简单)。

答案 1 :(得分:2)

即使使用jQueryRotate plugin它也可能有效,您是否曾向作者(我)询问此事? :P我不经常阅读stackoverflow来回答那种请求:)

答案 2 :(得分:1)

你可以看看使用Canvas。 IE 8没有本机支持,但有一个插件:http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more

如果您愿意接受插件要求,Canvas应该让您的工作变得轻松。

答案 3 :(得分:0)

你最好的机会是使用canvas并使用IE canvas hack。

IE的CSS旋转,就像IE的大多数其他黑客一样,使用过滤属性,这几乎肯定会干扰用于透明图像的过滤器黑客和用于改变不透明度的过滤黑客。

另一方面,画布黑客使用原生VML,它可以处理您需要的所有内容。

http://code.google.com/p/explorercanvas/

我不知道它的表现如何,所以你的里程可能会有所不同。