问题缘由
有时候,我们要实现展示两种图片的对比效果,通常是之前和之后的效果比较。在这种情况下,我们想到的可以是使两种图片并排放置,通过比较来观察区别,但是为了对比更加强烈,我们通常会使用的是,将两种图片放置在同一位置,比如 美图秀秀 等等工具,就是通过原图和处理的后的效果图,通过一个按钮,进行比较,这样子虽然效果比前一种强了点,但还是不够,用户需要不断的原图/效果图/原图/效果图的切换,来观察强烈的对比效果差,那我们可不可以使用一种 图片对比滑动控件 来处理这个事情呢,也就是说,这个控件将两种图片叠加起来,允许用户通过拖动条类控制两种图片的显露区域,进行比较。
问题介绍
图片对比滑动控件 其实理解起来就是两层结构:下层是固定的照片(我们可以放置效果图),上层图片(原图)则可以在水平方向进行调整大小,
问题思路
通常,我们可以使用JavaScript来控制图片的大小,但是现在我们可以利用CSS3 的 resize属性来解决;
Demo 体验地址:戳 here
问题源代码
HTML结构其实很简单,就是一个.image_slider,下面包含着两层图片
1 <div class="image_slider"> 2 <div> 3 <img src="./images/photo.png" alt="Befroe"> 4 </div> 5 <img src="./images/photo.png" alt="After"> 6 </div>
CSS如下:
1 .image_slider { 2 /* 使用内联块元素,可以使得元素自适应内部元素的大小*/ 3 display: inline-block; 4 position: relative; 5 } 6 .image_slider>div { 7 position: absolute; 8 top: 0; 9 bottom: 0; 10 left: 0; 11 resize: horizontal; /* 设置resize属性,并且设置overflow为hidden */ 12 overflow: hidden; 13 max-width: 100%; width:10px; 14 } 15 .image_slider>div>img { 16 filter: blur(8px); 17 } 18 .image_slider>div:before { /* 使用伪元素来修改调节手柄的样式,这个可以根据自己修改 */ 19 content: ""; 20 width: 12px; 21 height: 12px; 22 position: absolute; 23 bottom: 0px; 24 right: 0px; 25 background: rgb(255, 255, 255); 26 background: linear-gradient(-45deg,rgba(211, 206, 206, 0.84) 50%,rgba(0, 0, 0, 0) 0); 27 cursor: ew-resize; 28 z-index: 99; /* 记得使得层叠级别向上 */ 29 } 30 .image_slider img { 31 display: block; 32 user-select: none; /* 避免拖动图片 */ 33 -webkit-user-drag: none; /* 避免拖动图片 */ 34 }
注意点:
- 设置resize属性后,图片的可调节范围分别是:
chrome是图片的原宽度到最大宽度,(若想范围更大,可以设置初始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>
脚本文件为:
1 window.onload = function() { 2 createImgSlider("#slider"); 3 } 4 5 function createImgSlider(ele) { 6 var $slider = document.querySelector(ele); 7 var $div = document.createElement("div"); 8 var $img = $slider.querySelector("img"); 9 $slider.insertBefore($div, $img); 10 $div.appendChild($img); 11 12 var $range = document.createElement("input"); 13 $range.type = "range"; 14 // 设置初始值 15 $div.style.width="30%"; 16 $range.value="30"; 17 $range.oninput = function() { 18 $div.style.width = this.value + "%"; 19 } 20 // 注意 :IE只能监听onchange事件,无法监听oninput事件 21 $range.onchange = function() { 22 $div.style.width = this.value + "%"; 23 } 24 $slider.appendChild($range); 25 }