幻灯片/轮播

CoverFlow - 3D音乐专辑封面jQuery特效

阿里云


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 来支持移动触摸设备

HTML 结构:

该 CoverFlow 特效插件的基本 HTML 结构如下。

也想出现在这里?联系我们
创客主机
  1. <div class="coverflow">
  2.     <div class="cover">A</div>
  3.     <div class="cover">B</div>
  4.     ...
  5.     <div class="cover">Y</div>
  6.     <div class="cover">Z</div>
  7. </div>

初始化插件:

在页面加载完毕之后通过下面的方法来初始化该 CoverFlow 特效插件。

  1. $(function() {
  2.     $('.coverflow').coverflow();
  3. });

配置参数:

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

CoverFlow - 3D 音乐专辑封面 jQuery 特效

已有 607 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!