jQuery超酷苹果3D音乐专辑封面CoverFlow特效

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