图片比对让网页熠熠生辉

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

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

（你还可以让它再快一些）
但是说到这里，我们能不能不改变“把两张图放在一个位置上”的整体方针，而把“自动地变换”改为“用户手动控制图片展示”？因为上面这个效果太丑了…而且一般页面有一个轮播图就够了！
经过查找，笔者发现了一种既符合所想又非常友好的解决方案，被叫做“图片对比滑动控件”，其实现思路是：将两张图片叠加起来，初始时各自只展示一部分，允许用户通过拖动分隔条来控制两张图片各自显露区域的大小。
咔~

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

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~

---

福利放送
最近接到华为云的邀请
这一年中华为云也陆陆续续推出了各种各样的活动，但是毫不客气的讲，没有比开年采购季更加优惠的。
所以今年的开年采购季活动又开始了，各位小伙伴们不要错过呀！
首先是主打产品：

• 1核2G 1M带宽云耀云服务器 88一年，低至0.7折。限购1台（企业认证可购买两台）
• 2核4G 5M带宽云耀云服务器 413一年，低至1.2折。限购3台（墙裂推荐）
• 4核8G 1M带宽云耀云服务器 599一年，低至1.6折。限购3台
• 4核8G 5M带宽C6s高性能服务器 2385一年，低至3.9折。限购3台
• .COM域名23元一年！！！（推荐）

之前活动没有参与上的小伙伴千万不要错过。
另外，我也跟华为云的小伙伴争取到了一些额外的福利。

1. 个人注册并进行账号认证，可获得100元无门槛代金券！注意是无门槛，不是官网送的满减券。
2. 企业注册并进行企业实名认证的，可获得200元代金券
3. 注册并购买活动产品，再送100元代金券；另外企业注册的小伙伴还可以参加抽奖，100%中奖，最高可获得华为Mate Pad。

参与方式 ：扫码进入活动页面，点击右上角注册华为云账号

通过二维码/链接注册、实名认证用户，会在7工作日内收到代金券。代金券没有任何消费门槛，但是不能用于购买活动产品。可以给自己新买的服务器续费，或者买块硬盘。

注：开年采购季最优惠的产品都是仅限新用户购买的！所以大家一定不要先使用代金券，用了就不是新用户了。新用户资格非常珍贵，没有新用户资格就没办法购买88元一年的服务器了。