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

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery超酷苹果3D音乐专辑封面CoverFlow特效
jQuery超酷苹果3D音乐专辑封面CoverFlow特效
分享:

    插件介绍

    jQuery Coverflow是一款效果非常炫酷的苹果3D音乐专辑封面CoverFlow特效插件。该CoverFlow特效支持鼠标滚动、移动触摸、图片倒影和复杂的CSS3动画。

    浏览器兼容性

    浏览器兼容性
    时间:2015-05-24
    阅读:
简要教程

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