jQuery 类似 iTunes 的 Cover Flow

b4rc0ll0

4.84/5 (14投票s)

2011年12月10日

Apache

2分钟阅读

89808

3429

创建类似 iTunes Album Cover Flow 的基于 DIV 的 Cover Flow，支持鼠标水平拖动。

下载源代码 - 150.25 KB

引言

本文旨在展示一种简单的方法，使用 jQuery/jQueryUI 库在 HTML 中为自定义 DIV 重现类似 iTunes 的 Cover Flow 效果。

它可以通过鼠标完全拖动，并且具有自动重新定位系统，以确保至少有一个快照位于中间位置。

本文中展示的组件的简单用法如图所示

背景

该组件使用 jQuery 库来简化 JavaScript 开发。简单地使用流行的“JavaScript 继承实现”。

jquery.class.js

该组件允许创建面向对象的 JavaScript 类，这些类对于开发具有自身方法和属性的可重新分发的组件非常有用。

创建类后，只需选择具有特定功能的 target div 就可以轻松创建一个 CoverFlow 对象。

Using the Code

此 jQuery 组件的 HTML 目标代码非常简单。我们必须有一个 DIV，在本例中为“coverFlow1”，其中包含许多具有“snapshot”类的 DIV。

<html xmlns="http://www.w3.org/1999/xhtml" slick-uniqueid="1">
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.js"></script>
        <script type="text/javascript" src="js/jquery.class.js"></script>
        <script type="text/javascript" src="js/coverflow.class.js"></script>
        <script type="text/javascript" src="js/snapshot.class.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div id="coverFlow1" class="coverFlow">
                <div class="snapshot">1</div>
                <div class="snapshot">2</div>
                <div class="snapshot">3</div>
                <div class="snapshot">4</div>
                <div class="snapshot">5</div>
                <div class="snapshot">6</div>
                <div class="snapshot">7</div>
                <div class="snapshot">8</div>
                <div class="snapshot">9</div>
                <div class="snapshot">10</div>
        </div>
    </body>

“snapshot” CSS 样式的唯一约束是这些 DIV 的“position:absolute”，因为 JavaScript 尝试重新定位和调整这些 div 的大小，因此我们必须确保这些元素具有最大的自由度。

此工作需要脚本文件。 jQuery-1.7.1.js 是一个 jQuery 库，借助扩展库 jquery-ui-1.7.2.custom.js，它对于特定类型的动画非常有用。

如前所述，jquery.class.js 是一个允许我们创建面向对象类的库，因此 coverflow.class.js 和 snapshot.class.js 是我们的两个类。

script.js 是我们的主脚本。它只是创建 CoverFlow 类的实例

 $(document).ready(function(){
    
    //Unbind Image Dragging in html. Avoids drag problems on CoverFlow
    $('img').bind('dragstart', function(event) { event.preventDefault(); });
    
    var coverFlowElement = $('#coverFlow1');
    var coverFlow = new CoverFlow(coverFlowElement);
        
});

我们可以看到这个脚本通过一行代码“var coverFlow = new CoverFlow(coverFlowElement);”自动创建了 CoverFlow 组件所需的所有代码。

对于开发人员，请查看我们两个类的可下载代码。代码自解释。它只是创建方法来调整 CoverFlow 容器中快照 div 的大小和重新定位。

它将鼠标拖动绑定到 CoverFlow，并自动居中最近的 DIV，就像商业中常见的 CoverFlow 组件一样。

关注点

您可以在不修改 JavaScript 的情况下简单地将此代码用于您的工作。通过简单的 CSS 重新设计和 HTML 元素在 Snapshot DIV 中，您可以获得此效果

如果您想简单地修改一些 JavaScript 代码来更改此组件的外观，您可以在 coverflow.class.js 中查看主要的 CoverFlow 参数。

 /* Parameters */
this._snapshotClass = ".snapshot";
this._snapshotDistance = this._width / 7;
this._smoothness = 1;
this._timeAnimation = 300;

_snapshotClass 是 CoverFlow 容器中包含的 DIV 的 className。 _snapshotDistance 是快照之间的初始距离。 _smoothness 是一个系数，表示围绕主快照的 DIV 的变形。 _timeAnimation 是 coverFlow 的滚动动画的毫秒数。

兼容性

此组件已使用以下浏览器进行测试

Chrome 16.0.912.63
Firefox 8
Internet Explorer 9