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


    问题缘由

          有时候,我们要实现展示两种图片的对比效果,通常是之前和之后的效果比较。在这种情况下,我们想到的可以是使两种图片并排放置,通过比较来观察区别,但是为了对比更加强烈,我们通常会使用的是,将两种图片放置在同一位置,比如 美图秀秀 等等工具,就是通过原图和处理的后的效果图,通过一个按钮,进行比较,这样子虽然效果比前一种强了点,但还是不够,用户需要不断的原图/效果图/原图/效果图的切换,来观察强烈的对比效果差,那我们可不可以使用一种 图片对比滑动控件 来处理这个事情呢,也就是说,这个控件将两种图片叠加起来,允许用户通过拖动条类控制两种图片的显露区域,进行比较。
    问题介绍
         图片对比滑动控件 其实理解起来就是两层结构:下层是固定的照片(我们可以放置效果图),上层图片(原图)则可以在水平方向进行调整大小,
     
    问题思路
        通常,我们可以使用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 }
    注意点:
    1. 设置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 }
     
     
     
  • 相关阅读:
    ThreadLocal Thread ThreadLocalMap 之间的关系
    组合注解(Annotation)
    Halo 开源项目使用jsdelivr进行CDN加速.
    如何正确认知和提升自己的“格局”“视野”“高度”?
    格局如何提高?站在未来看今天。
    Cookie 的技术学习笔记
    JVM垃圾收集器与内存分配策略
    java内存区域与内存溢出异常
    JAVA中的BIO,NIO与多路复用(select,poll,epoll)
    Hexo yilia主题搭建自己的github个人博客(一)
  • 原文地址:https://www.cnblogs.com/kasmine/p/6502377.html
Copyright © 2020-2023  润新知