圖檔比對讓網頁熠熠生輝

相信不少人都看過圓明園破損後的圖檔，殘垣敗壁，令人惋惜。一些網站為了增加對比程度，将圓明園被毀前後的圖檔放在一起，這樣确實非常鮮明。

“對比”已經越來越多地被用來在偏設計的網站中了，而最常見的布局方案是将兩張圖并排/并列放置。但由此帶來的問題是：就像“找不同”一樣，人通常隻能觀察到非常明顯的差異 —— 正如上面所說“圓明園對比圖”一樣。于是還有的網站幹脆把兩張對比圖弄成一張圖檔展示，簡直無語。

跟上面描述場景相似的還有一個離譜的解決方案：把兩張圖放在一個位置上，然後定時來回變換 —— 開發者人為制造一個突兀地、抓住眼球的場景（氛圍）！但這樣也不行：使用者需要等待多次變換才能看到你想表達的東西。這不僅犧牲了他們的時間也會分散他們的精力。就像這樣：

（你還可以讓它再快一些）

但是說到這裡，我們能不能不改變“把兩張圖放在一個位置上”的整體方針，而把“自動地變換”改為“使用者手動控制圖檔展示”？因為上面這個效果太醜了…而且一般頁面有一個輪播圖就夠了！

經過查找，筆者發現了一種既符合所想又非常友好的解決方案，被叫做“圖檔對比滑動控件”，其實作思路是：将兩張圖檔疊加起來，初始時各自隻展示一部分，允許使用者通過拖動分隔條來控制兩張圖檔各自顯露區域的大小。

咔~

通過上面的描述，你能想到什麼？

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;
}