Javascript 页面滑块 汇总

“页面滑块”有点类似于 选项卡式盒子，只是内容看起来是滑动而不是立即替换。这是一个非常不错的效果，并且像选项卡式盒子一样，它可以帮助您在单个页面上容纳大量内容，而不会导致视觉混乱。创建这些页面滑块的技术和框架有很多。这里是我发现和使用的一些方法的汇总。

Coda 滑块

Niall Doherty 的 Coda 滑块 是为了纪念 Panic 的 Coda 软件页面上使用的非常好的页面滑块而创建（并命名）的。有一个可下载的示例，包括所需的 jQuery。我非常喜欢 Coda 滑块。除了两侧的强制箭头之外，它还具有许多很棒的导航功能，例如具有唯一类和内部导航的选项卡。该示例非常基础，可以让您快速开始围绕它进行设计。也许它最好的功能是唯一的 URL。使用 ID 样式导航（#location），您可以直接链接到滑块内的页面，无论是来自外部页面还是页面本身。

 

分步轮播查看器

Dynamic Drive 提供了一个名为 分步轮播查看器 的页面滑块脚本，该脚本也使用 jQuery。他们在页面上使用的示例仅为图像，但面板本身只是 DIV，因此您可以想象在其中放置任何您想要的内容。有一些独特的导航选项，这使得它很酷，例如“向前 2 个面板”和“返回到第 1 个面板”，以及显示您当前正在查看哪个面板（或面板范围）的选项。

 

“跟随鼠标”滑块

Woork 上的 Antonio Lupetti 有一个非常酷的页面滑块，他说 模拟 Flash 水平导航效果，这次使用 MooTools。该技术易于理解。像所有滑块一样，有一个外部容器隐藏其中的任何溢出内容。然后，它内部有一个更宽的容器，其中只有一部分在任何给定时间显示。此滑块不会向前或向后移动固定数量，而是随着您的鼠标靠近外部容器的左侧或右侧而向右或向左移动。

 

jCarousel

当我四处询问这些页面滑块时，jCarousel 是我听到最多的一个，所以我认为它是“最受欢迎的”。这个有很多独特的选项：垂直、自动滚动、动态内容、自动重复、其他动画……同样，这里的所有示例都是图像缩略图，但它们都包含在列表元素中，因此您可以用任何类型的内容替换它。也不要被小尺寸所迷惑，所有内容都完全可以通过 CSS 控制。

 

YUI 轮播

当然，广受欢迎的 YUI 库也不会错过所有乐趣！Bill Scott 开发了 轮播组件，它具有与 jCarousel 类似的强大功能集。

 

实际使用中的示例

我最近一直对页面滑块的概念很感兴趣（可能有点过头了！），但我认为它对某些事情非常有效。其中一件特别的事情是作品集。关于“翻阅”作品集有一些非常吸引人的东西。有点让人想起作品集是带有手柄和拉链的大皮革制品的时候。由于作品集中的每个项目都与下一个项目大不相同，因此一次只查看一个项目会很好，但当您想查看下一个项目时不必等待整个页面加载。这些大多未完成，但您可以查看我最近完成的一些作品集风格的页面：Chatman Design 打印作品集 – Jeff Campana 陶瓷。对于更传统的图像缩略图/灯箱示例，这里是我为另一位客户制作的模型页面：Rick Wilcox 魔术剧院。