Page 196 - css揭秘

图 6-25
在英国新闻媒体《卫报》的官网
上，就有一个交互式图片对比的
好例子，它允许读者通过图片的
对比来了解 2011 年伦敦骚乱事
件的灾难性后果。读者需要拖动
两张图片中间的白色分割条，但
这个分割条自身并没有任何特征
提示它是可以拖动的，因此这里
需要有一行提示文字（“移动滑
块……”）。在理想情况下，一个
合理而易懂的界面是不需要这种
提示文字的。
图片来源：http://theguardian.com/
uk/interactive/2011/aug/09/london-
riots-before-after-photographs

有没有一种简单的方法可以实现这个控件呢？实际上，方法不止一种！

CSS resize 方案

仔细想一想就会发现，图片对比滑动控件基本上可以理解为两层结构：
下层是一张固定的图片；上层的图片则可以在水平方向上调整大小，从而或
多或少地显露出下层图片。这正是 JavaScript 框架的价值所在：让上层图片
的宽度可以由鼠标拖动调整。不过，要让某个元素的大小变得可调整，并
不需要动用脚本。在 CSS 基本 UI 特性（第三版）（http://w3.org/TR/css3-
ui/#resize）中，我们获得了一个为此而生的新属性：低调的 resize ！

哪怕你从来没有听说过这个属性，也应该体验过它的行为，因为对
<textarea> 元素来说，这个属性被默认设置为 both，这让它在水平和垂直
1①
方向上都是可以调整大小的 。不过，这个属性实际上适用于任何元素，只
要它的 overflow 属性不是 visible。对几乎所有元素来说，resize 默认都
是设置为 none 的，即禁用调整大小的特性。除了 both 之外，这个属性接受
的值还有 horizontal 和 vertical，它们可以限制元素调整大小的方向。

好的，问题来了：能否利用这个属性来实现我们想要的滑动控件呢？要

① 对 <textarea> 元素应用 resize: vertical 样式往往是个好主意，这不仅保留了它尺寸可
调的特性，而且避免了水平方向上的尺寸变化（这往往会破坏布局）。

35 交互式的图片对比控件 165

඀ࠡ JOEC