jQuery Coverflow是一款效果非常炫酷的苹果3D音乐专辑封面CoverFlow特效jQuery插件。该CoverFlow特效支持鼠标滚动、移动触摸、图片倒影和复杂的CSS3动画。CoverFlow特效的特点有：
- 支持单独的CSS文件
- 可以使用键盘的Home，End，Page Up，Page Down键进行控制
- 如果浏览器支持会使用CSS3 transformations，否则会自动回退
- 支持动画的easing和duration
- 支持定制CSS transition代码以及CSS3 filters等特殊效果
- 内置支持鼠标滚动事件
- 可以选用interpolate.js来支持复杂的CSS动画
- 可以选用Reflections.js来支持倒影效果。
- 可以选用TouchSwipe来支持移动触摸设备。
安装
可以通过Bower来按钮该CoverFlow特效插件。
bower install coverflow
jQuery需要1.8.0以上版本，1.7.x也可以工作，但是点击选择封面图片。
jQuery UI需要1.9.0以上版本。
使用方法
HTML结构
该CoverFlow特效插件的基本HTML结构如下。
<div class="coverflow">
<div class="cover">A</div>
<div class="cover">B</div>
...
<div class="cover">Y</div>
<div class="cover">Z</div>
</div>
初始化插件
在页面加载完毕之后通过下面的方法来初始化该CoverFlow特效插件。
$(function() {
$('.coverflow').coverflow();
});
配置参数
- duration (integer/string, default: "normal")：动画的速度。可以使用："slow"、"normal"、"fast"或一个一毫米为单位的整数。
- easing (string, default: undefined)：定义滚动的easing效果。如果没有定义，默认使用"swing"效果。
- index (string, integer: 0)：初始化时旋转的index。
- innerAngle (float, integer: -75)：inner covers的角度，单位为degrees。负数表示封面向内旋转，正数表示封面向外旋转。
- innerCss (object, default: undefined)：包含inner covers的CSS属性的对象。如果不需要改变CSS不用定义这个参数。
- outerAngle (float, integer: -30)：outer covers的角度，单位为degrees。负数表示封面向内旋转，正数表示封面向外旋转。
- outerCss (object, default: undefined)：包含outer covers的CSS属性的对象。如果不需要改变CSS不用定义这个参数。
- selectedCss (object, default: undefined)：包含已选择 covers的CSS属性的对象。如果不需要改变CSS不用定义这个参数。
方法
- cover：作为一个jQuery对象来获取当前选择的封面图片。
- index：获取或设置当前的index。如果没有提供值，会返回当前的index值。
- refresh：重新渲染封面。在添加或移除封面或改变封面时才需要调用这个方法。
事件
- change：在当前封面的index发送改变时触发。Callback:
function(event, cover, index) - confirm：当用户点击当前封面时触发。Callback:
function(event, cover, index) - select：当一个封面被选择时触发。Callback:
function(event, cover, index) - animateStep：在每一个动画帧中触发。Callback:
function(event, cover, offset, isVisible, isMiddle, sin, cos) - animateComplete：在动停止时触发。Callback:
function(event, cover, offset, isVisible, isMiddle, sin, cos)
更多关于该CoverFlow特效插件的信息请参考：https://github.com/vanderlee/coverflow
