图片比对让网页熠熠生辉

相信不少人都看过圆明园破损后的图片，残垣败壁，令人惋惜。一些网站为了增加对比程度，将圆明园被毁前后的图片放在一起，这样确实非常鲜明。
“对比”已经越来越多地被用来在偏设计的网站中了，而最常见的布局方案是将两张图并排/并列放置。但由此带来的问题是：就像“找不同”一样，人通常只能观察到非常明显的差异 —— 正如上面所说“圆明园对比图”一样。于是还有的网站干脆把两张对比图弄成一张图片展示，简直无语。

跟上面描述场景相似的还有一个离谱的解决方案：把两张图放在一个位置上，然后定时来回变换 —— 开发者人为制造一个突兀地、抓住眼球的场景（氛围）！但这样也不行：用户需要等待多次变换才能看到你想表达的东西。这不仅牺牲了他们的时间也会分散他们的精力。就像这样：

（你还可以让它再快一些）

但是说到这里，我们能不能不改变“把两张图放在一个位置上”的整体方针，而把“自动地变换”改为“用户手动控制图片展示”？因为上面这个效果太丑了…而且一般页面有一个轮播图就够了！

经过查找，笔者发现了一种既符合所想又非常友好的解决方案，被叫做“图片对比滑动控件”，其实现思路是：将两张图片叠加起来，初始时各自只展示一部分，允许用户通过拖动分隔条来控制两张图片各自显露区域的大小。

咔~

通过上面的描述，你能想到什么？

1. 图片叠加 -> 必然至少一张图片脱离了文档流存在
2. 拖动大小 ->​​<textarea>​​​ -> css​​resize​​​ 属性（其实用JS也可以，但在笔者总结的“小梦优先策略”中，CSS使用优先级大于JS，这有好处！）

让我们先来剖析下 resize 属性！
你或许从来没听过它，但你一定体验过 —— 因为对 ​​​<textarea>​​​ 元素来说，这个属性被默认赋值为 ​​both​​ ，这让 textarea 在水平和垂直方向上都可以任意调整：

• both：允许用户在水平和垂直方向上调整元素的大小
• horizontal：允许用户在水平方向上调整元素的大小
• vertical：允许用户在垂直方向上调整元素的大小
• none：一般为默认值
• block：‎根据‎‎编写模式‎‎和‎‎方向‎‎值，元素显示允许用户水平或垂直调整组件大小的机制
• inline：根据‎‎编写模式‎‎和‎‎方向‎‎值，元素显示允许用户以内联方向水平或垂直调整元素大小的机制

实际上，这个属性可作用且生效在任何 ​​overflow​​​ 值不是 ​​visible​​ 的元素上！

让我们再继续剖析一下上面说的“终极解决方案”！

深入一点地说，它基本包含两层：一层可以拖动，一层是固定的。上层图片在水平方向调整大小从而或多或少地显露出下层图片。

所以，HTML代码应该是这样的：

<div class="image-slider" title="拖动右下角可自由查看">
  <div>
    <img src="img/n1.jpg" alt="这是原图" />
  </div>
  <img src="img/n2.jpg" alt="这是对比图" />
</div>

接下来初始化一些定位和尺寸：

.image-slider{
  position: relative;
  display: inline-block;
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.image-slider > div{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  max-width: 100%; /* 虽说下面设置了overflow，但是你会发现如果不设置这一行拖动行为仍然可以发生在父元素之外 */
  overflow: hidden; /* 溢出隐藏 */
  resize: horizontal;
}
.image-slider img{
  display: block;
  height: 100%;
}

这时候，图片上就显示了“经典 textarea 手柄”了。不过…这怎么看怎么别扭的右下角图标着实难受，还不容易辨认！
不幸的是，目前还没有任何标准的方法可以设置这个“调节手柄”的样式。有些渲染引擎特别为这个需求提供了私有的伪元素（比如 ​​​::-webkit-resizer​​​），但目前来看局限性非常大。笔者有一个大胆的想法：用一个伪元素覆盖在调节手柄之上。这一方面可以很方便地设置样式；另一方面，即使在不加 ​​pointer-events: none​​ 的情况下，这个伪元素也不会干扰调节手柄的功能：

.image-slider > div::before{
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  padding: 1px;
  background: linear-gradient(-45deg,white 50%,transparent 0);
  background-clip: content-box;
  cursor: ew-resize;
}

这样就几乎完美的实现我们想要的效果了！

nice~