JavaScript实现Coverflow效果
Coverflow是苹果公司首创的将多首歌曲的封面以3D界面的形式显示出来的方式，用户手指划动图片，图片将不断以3D的形式滚动切换，效果非常炫酷，苹果公司先后在多个产品中使用了这种效果。
在很久的以前，有人就通过JavaScript实现过这样的效果，但最终结果不尽人意。随着HTML5&CSS3技术的不断发展，实现Coverflow效果将变得如此简单，在这篇文章中，零度将带您使用HTML5和CSS3技术构建一款基于Coverflow效果的网页，让您的网页瞬间炫酷起来。在本文末尾将分别提供2种演示效果。
1.jquery.coverflow新特性介绍
单独的，独立于HTML5页面的CSS样式。
支持通过键盘上下左右光标、Home、End, PageUp和PageDown左右3D滚动切换。
单击图片时，将焦点移动至当前图片。
如果浏览器支持CSS3特性时，将使用转换特性，否则优雅降解。
灵活设置动画效果和动画持续时间。
支持鼠标滚轮左右切换滚动，只需要引用jquery-mousewheel插件即可，该已包含在安装包中。
支持手动开启和关闭反射倒影效果，只需要引用reflection即可，该插件已包含在安装包中。
支持复杂的CSS转换，只需添加我们自己开发的jquery.interpolate插件， 该插件已包含在安装包中。
支持触控滑动，只需要引用jquery.touchSwipe插件即可，该插件已包含在安装包中。
2.下载jquery.coverflow插件
在本文末尾可下载jquery.coverflow安装包，安装包已包括jquery.coverflow和常用的插件，为了更好的使用jquery.coverflow效果，建议您引用jQuery-1.8.0+和jQueryUI-1.9.0+以上的版本，在本中提到的所有脚本库，零度已分享下载。
3.使用jquery.coverflow插件
如果要在项目中使用jquery.coverflow插件，首先需要在页面中引用依赖脚本，这是一切工作的开始。
<script src="scripts/jquery-1.8.0.js"></script> <script src="scripts/jquery-ui-1.9.0.js"></script> <link href="styles/jquery-ui-1.9.0.css" rel="stylesheet" /> <script src="scripts/jquery.coverflow.js"></script>
当然如果需要支持本文第1部分中提到的其它特性，下面的一些脚本的引用是可选的。
<script src="scripts/jquery.interpolate.js"></script> <script src="scripts/jquery.mousewheel.js"></script> <script src="scripts/jquery.touchSwipe.min.js"></script> <script src="scripts/reflection.js"></script>
完成脚本引用后，需要创建呈现Coverflow效果的div元素作为容器，这个div容器的结构如下所示：
<div class="coverflow"> <div class="cover">A</div> <div class="cover">B</div> ... <div class="cover">Y</div> <div class="cover">Z</div> </div>
最后，您只需要在DOM加载完后调用初始化方法coverflow即可实现3D滚动切换效果。
<script> $(function () { $('.coverflow').coverflow(options); }); </script>
coverflow方法提供一个options参数可选项，可帮助您定制更加个性化的Coverflow效果，更多参数请参阅官方API文档查看。
4、关于浏览器兼容性问题
毫无疑问，jquery.coverflow是jquery的一款插件，同时需要浏览器支持HTML5和CSS3，jquery.coverflow具有非常优秀的3D立体表现效果，如果浏览器不支持HTML5和CSS3，将导致最终效果混乱不堪，甚至无法正常显示。如果您的产品需要覆盖所有的浏览器版本，这不是最好的选择。
如果您需要Coverflow效果，即使浏览器不支持HTML5，又想兼容多个浏览器版本，那么，这里提供最后一种解决方案，可使用我们提供得ImageFlow方式解决兼容性问题，ImageFlow不依赖于任何第三方脚本库，使用原生JavaScript实现，并解决了浏览器兼容问题，实现了简单的Coverflow效果，支持倒影反射，但效果不如jquery.coverflow炫酷，如果需要支持鼠标滚轮、键盘事件和立体效果，需要自己动手改造。
5.零度自己的观点
如果要实现Coverflow效果，jquery.coverflow和ImageFlow各有千秋，前者效果炫酷，需要浏览器支持HTML5，并依赖于很多基础脚本库，比较重量；后者简单轻量，不依赖于任何脚本库，但效果不如前者炫酷，相信您看完本文应该有自己的选择，感谢您阅读本文，希望对您有所帮助，以下是零度分享的演示链接。