实现一个交互式的图片对比控件

问题缘由

      有时候，我们要实现展示两种图片的对比效果，通常是之前和之后的效果比较。在这种情况下，我们想到的可以是使两种图片并排放置，通过比较来观察区别，但是为了对比更加强烈，我们通常会使用的是，将两种图片放置在同一位置，比如 美图秀秀 等等工具，就是通过原图和处理的后的效果图，通过一个按钮，进行比较，这样子虽然效果比前一种强了点，但还是不够，用户需要不断的原图/效果图/原图/效果图的切换，来观察强烈的对比效果差，那我们可不可以使用一种 图片对比滑动控件 来处理这个事情呢，也就是说，这个控件将两种图片叠加起来，允许用户通过拖动条类控制两种图片的显露区域，进行比较。

问题介绍

     图片对比滑动控件 其实理解起来就是两层结构：下层是固定的照片（我们可以放置效果图），上层图片（原图）则可以在水平方向进行调整大小，

 

问题思路

    通常，我们可以使用JavaScript来控制图片的大小，但是现在我们可以利用CSS3 的 resize属性来解决；

 

Demo 体验地址：戳 here 

 

问题源代码

HTML结构其实很简单，就是一个.image_slider，下面包含着两层图片

<div class="image_slider">
     <div>
      <img src="./images/photo.png" alt="Befroe">
     </div>
     <img src="./images/photo.png" alt="After">
</div>

CSS如下：

.image_slider {
  /* 使用内联块元素，可以使得元素自适应内部元素的大小*/
  display: inline-block;
  position: relative;
}
.image_slider>div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  resize: horizontal; /* 设置resize属性，并且设置overflow为hidden */
  overflow: hidden;
  max-width: 100%;  width:10px;
}
.image_slider>div>img {
  filter: blur(8px);
}
.image_slider>div:before { /* 使用伪元素来修改调节手柄的样式，这个可以根据自己修改 */
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: rgb(255, 255, 255);
  background: linear-gradient(-45deg,rgba(211, 206, 206, 0.84) 50%,rgba(0, 0, 0, 0) 0);
  cursor: ew-resize;
  z-index: 99; /* 记得使得层叠级别向上 */
}
.image_slider img {
  display: block;
  user-select: none; /* 避免拖动图片 */
  -webkit-user-drag: none; /* 避免拖动图片 */
}

注意点：

1. 设置resize属性后，图片的可调节范围分别是：

chrome是图片的原宽度到最大宽度，（若想范围更大，可以设置初始width:10px;可以显示可调节手柄）; FireFox 则是从最小宽度到最大；

缺点：IE和Edge以及ios safari暂时不支持此特性

 

JavaScript解决方案

    由于某些浏览器暂时不支持 resize的属性，下面我们来使用js实现这样子的一个控件~

基本原理

    利用一个input[type="range"]的控件来调整图片的大小，监听范围输入控件的oninput或者onchange(IE)事件变化，来修改上层图片的大小

    将html代码精简到如下结构，然后使用js来转换结构：

<div class="image_slider" id="slider">
    <img src="./images/photo.png" alt="Befroe">
    <img src="./images/photo.png" alt="After">
</div>

转换为：

<div class="image_slider" id="slider">
    <div><img src="./images/photo.png" alt="Befroe"></div>
    <img src="./images/photo.png" alt="After">
    <input type="range">
</div>

脚本文件为：

window.onload = function() {
  createImgSlider("#slider");
}

function createImgSlider(ele) {
  var $slider = document.querySelector(ele);
  var $div = document.createElement("div");
  var $img = $slider.querySelector("img");
   $slider.insertBefore($div, $img);
   $div.appendChild($img);

  var $range = document.createElement("input");
   $range.type = "range";
  // 设置初始值
   $div.style.width="30%";
   $range.value="30";
   $range.oninput = function() {
         $div.style.width = this.value + "%";
   }
   //  注意 ：IE只能监听onchange事件，无法监听oninput事件
   $range.onchange = function() {
        $div.style.width = this.value + "%";
   }
   $slider.appendChild($range);
}