jQuery Coverflow 是一款效果非常炫酷的苹果 3D 音乐专辑封面 CoverFlow 特效 jQuery 插件。该 CoverFlow 特效支持鼠标滚动、移动触摸、图片倒影和复杂的 CSS3 动画。CoverFlow 特效的特点有:
该 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
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!