js/jquery 覆盖流效果答案

【问题标题】：js/jquery coverflow effectjs/jquery 覆盖流效果
【发布时间】：2011-01-12 06:55:59
【问题描述】：

我尝试使用 js/jQuery 归档某个效果：Apple Mac OS X Coverflow Coverflow http://img69.imageshack.us/img69/8716/bildschirmfoto20100202u.png 效果，您可以在 finder 中选择。你能指点我一个温和流畅的工作插件吗？我喜欢 jquery 的#roundabout，但不幸的是他们不支持这种效果。我还尝试了这篇文章的一些链接插件：Apple Cover-flow effect using jQuery or other library? 但它们都很糟糕，而且在 Firefox 中运行不顺畅（更不用说 IE）了。

谢谢

【问题讨论】：

【解决方案1】：

看起来好像真正的视觉效果根本还没有存档，因为这很困难。您可能还需要使用一些画布/转换技术。 jQuery 规划/开发 wiki 说明如下：http://jqueryui.pbworks.com/Coverflow

【讨论】：

【解决方案2】：

我尝试了一段时间寻找与 javascript/jquery 相同的东西。可以找到任何具有转动效果的东西。最后我使用了Sebastiaan Holtrop的Flex组件

您可以看到演示应用程序here - 侧面的控件只是向您展示如何自定义组件。非常容易定制。

工作非常顺利。我只花了几天的时间就让它为我工作 - 之前对 Flex 一无所知。

【讨论】：

【解决方案3】：

查看momoflow

真正的封面流效果，在 Webkit（Safari 和 Chrome）和 Opera 上性能非常好，在 Firefox 上还可以。

【讨论】：

【解决方案4】：

这是 Cover Flow 的跨浏览器实现：http://luwes.co/labs/js-cover-flow/

主要模式在 HTML5 (JavaScript/CSS) 中工作，并且在 Flash 中可用于旧版浏览器。它支持移动，您可以通过简单的滑动手势翻阅封面。

它在最新的 webkit 浏览器中进行了硬件加速。

测试平台：Safari、Chrome、Firefox、Opera、IE8+、iPad、iPhone

【讨论】：

谢谢卢维斯。但这不是覆盖流效应。您不会获得真正的 3d 印象（在 Chrome 21 中测试）。图像只是挤在一起，但不要转动和向右后或左后滑动。
感谢您的反馈 Max。然后我们的设置之间会出现一些奇怪的差异。在我使用 Chrome 21 的 OSX 和 Windows 上，3D 效果都在起作用。您的浏览器中是否有任何 3D 转换功能？ webkit.org/blog/386/3d-transforms
嘿卢维斯。哇，没有它的工作。我仍在使用 chrome 21（Windows 7）。酷！