使用 Javascript 旋转图像
首先,我目前正在使用 JQuery,因此 JQuery 解决方案可行。
我想将图像旋转动态 X 度,每秒计算一次。
现在我使用这个 JqueryRotate 插件 完美地工作了
图像每秒完美旋转。但我现在正在尝试一些更复杂的事情。
我想将 4 个透明图像旋转到彼此之上。目前我有四个 标签,全部正确对齐,看起来又漂亮又漂亮 ^_^ 但使用我之前提到的 JqueryRotate 插件会强制重新绘制图像以旋转它,从而失去透明度,所以只有显示最上面的图像,这显然是行不通的。
那么,什么是一个好的库/插件或旋转图像同时保持透明度的方法?*
必须在 Opera、Safari、Chrome、Firefox 和 IE8+ 中工作,
我希望不必包含另一个库但如果需要的话我会这样做来创建旋转 4 个图像的效果。提前致谢。
First off, I am currently using JQuery so JQuery solutions viable.
I want to rotate an image by a dynamic X degrees which is calculated every sec.
Now I had this working perfectly using this JqueryRotate plugin
The image is rotated perfectly every sec. But I am trying something a little more complicated now.
I want to rotate 4 transparent images on top of each other. Currently I have four <img>
tags all correctly aligned and looking nice and pretty ^_^ but using the JqueryRotate plugin that I mentioned earlier forces a redrawing of the image to rotate it losing the transparency so only the top most image is displayed which obviously isn't going to work.
So, What is a good library / plugin or way of rotating an Image whilst keeping transparency?*
Must work in Opera, Safari, Chrome, Firefox and IE8+
I am hoping not to have to include another library for this but if need be I will do so to create this effect of rotating the 4 images. Thanks in advance.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
Raphael 是一个很棒的库,可以在 IE(使用 VML)和其他浏览器(使用SVG)。它可以旋转图像并处理透明度。
我不知道还有什么其他方法可以处理IE。 CSS 解决方案非常简单,但它们在 IE 中不起作用。
另一种选择是使用CSS精灵模拟图像旋转( 该示例模拟了 3d 旋转,但 2d 也同样简单)。
Raphael is a great library that works in IE (with VML) and other browsers (with SVG). It can rotate images and deal with transparency.
I don't know of any other way to deal with IE. CSS solutions are quite easy, but they don't work in IE.
Another option is to simulate image rotation with CSS sprites (the example does a simulated 3d rotatoin, but 2d is just as easy).
好吧,即使使用 jQueryRotate 插件,它也可能有效,您向作者(我)询问过这个问题吗? :PI 不会经常阅读 stackoverflow 来回答此类请求:)
Well it might work even with jQueryRotate plugin, have you asked author (me) about this ? :P I dont read stackoverflow so often to answer that kind of requests :)
你可以看看使用 Canvas。 IE 8 没有本机支持,但有一个插件: http ://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more。
如果您愿意接受插件要求,Canvas 应该会让您的工作变得轻松。
You could look at using Canvas. No native support from IE 8 but there is a plugin: http://ajaxian.com/archives/explorer-canvas-updated-for-ie-8-and-more.
If you were willing to live with the plugin requirement, Canvas should make your job easy.
最好的机会是使用画布并使用 IE 画布 hack。
与大多数其他 IE 黑客一样,IE 的 CSS 旋转使用了过滤器属性,这几乎肯定会干扰用于透明图像的过滤器黑客和用于更改不透明度的过滤器黑客。
另一方面,canvas hack 使用本机 VML,它可以处理您需要的一切。
http://code.google.com/p/explorercanvas/
我不知道如何它是高性能的,所以你的里程可能会有所不同。
Your best chance is to use canvas and use the IE canvas hack.
The CSS rotate for IE, like most other hacks for IE, uses the filter property, which will almost certainly interfere with the filter hack that's used for transparent images and the filter hack for changing opacity.
The canvas hack, on the other hand, uses native VML instead, which handles everything you need.
http://code.google.com/p/explorercanvas/
I don't know how performant it is, so your mileage may vary there.