Javascript 页面滑块 汇总

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

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

Coda 滑块

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

 

分步轮播查看器

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

 

“跟随鼠标”滑块

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

 

jCarousel

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

 

YUI 轮播

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

 

实际使用中的示例

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