2010-10-18 126 views
4

首先,我目前使用JQuery使JQuery解决方案可行。使用Javascript旋转图像


我想通过每秒计算一次动态X度来旋转图像。

现在我有这个工作完全使用该JqueryRotate plugin

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

我想旋转4个透明的图像在彼此的顶部。目前我有四个<img>标签都正确对齐,看起来不错,很漂亮^ _ ^但使用我前面提到的JqueryRotate插件强制重绘图像旋转它失去透明度,所以只显示最上面的图像显然是'去工作。

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

必须在Opera,Safari浏览器,Chrome浏览器,Firefox和IE8 +

工作

我希望不是必须为此包含另一个库,但如果需要的话,我会这样做来创建旋转4个图像的这种效果。提前致谢。

+3

据我所知,唯一可行的解​​决方案是巫术或伏都教。但严重的是,我从来没有听说过任何可以做到这一点,除了CSS3 + JS,但是排除了IE8。 – 2010-10-18 02:24:03

回答

1

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

如果您愿意满足插件要求,Canvas应该让您的工作变得简单。

+1

我认为你有一个问题的原因(没有真正尝试)是JqueryRotate覆盖多个画布。我所建议的是将多个图像叠加到一个画布上。我知道帆布支持透明度和旋转。 – SamStephens 2010-10-18 05:20:33

0

你最好的机会是使用画布,并使用IE画布破解。

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

另一方面,画布破解使用原生VML代替,它可以处理您需要的一切。

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

我不知道它是怎么高性能,所以你的里程可能会有所不同在那里。

4

Raphael是一个伟大的图书馆,工作在IE浏览器(与VML)和其他浏览器(与SVG)。它可以rotate images并处理透明度。

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

另一种选择是simulate image rotation with CSS sprites的例子做了模拟的3D rotatoin,但2d是一样容易)。

2

那么它可能工作,即使与jQueryRotate plugin,你问作者(我)这个?:P我不经常阅读stackoverflow来回答这种请求:)