使用Resize实现强大的图片拖拽切换预览功能

Hello 大家好，我是 Coco，今天给大家带来一个巧妙的小技巧。

创新互联建站专注于南安企业网站建设,成都响应式网站建设公司,商城网站建设。南安网站建设公司,为南安等地区提供建站服务。全流程定制网站设计，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务

本文将介绍一个非常有意思的功能，使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样：

思路

首先，要实现这样一个效果如果不要求可以拖拽，其实有非常多的办法。

  1. 将两张图片叠加在一起
  2. 改变上层图片的宽度，或者使用 mask， 改变 mask 的透明度区间变化

两种方式都简单示意一下。

假设我们的结构如下，分别使用 background 展示两张图片：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
 
  •  

    方法一，改变上层图片的宽度的方式：

     
 
 
 
      
  
  
  
  
    1. .g-outer { 
      2. 
  
  
  
  
    2.     width: 650px; 
      3. 
  
  
  
  
    3.     height: 340px; 
      4. 
  
  
  
  
    4.     background-image: url(image1.png); 
      5. 
  
  
  
  
    5.     overflow: hidden; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. .g-inner { 
      8. 
  
  
  
  
    8.     height: 340px; 
      9. 
  
  
  
  
    9.     background: url(image2.png); 
      10. 
  
  
  
  
    10.     animation: widthchange 3s infinite alternate linear; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. @keyframes widthchange { 
      13. 
  
  
  
  
    13.     0% { 
      14. 
  
  
  
  
    14.         width: 650px; 
      15. 
  
  
  
  
    15.     } 
      16. 
  
  
  
  
    16.     100% { 
      17. 
  
  
  
  
    17.         width: 0px; 
      18. 
  
  
  
  
    18.     } 
      19. 
  
  
  
  
    19. } 
      20.

    效果如下：

    当然，使用 mask 遮罩的方式也非常轻松的可以实现类似的效果：

     
 
 
 
      
  
  
  
  
    1. .g-outer { 
      2. 
  
  
  
  
    2.     background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png); 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .g-inner { 
      5. 
  
  
  
  
    5.     background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png); 
      6. 
  
  
  
  
    6.     mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%); 
      7. 
  
  
  
  
    7.     mask-size: 200% 100%; 
      8. 
  
  
  
  
    8.     animation: maskChange 2s infinite alternate linear; 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. @keyframes maskChange { 
      11. 
  
  
  
  
    11.     0% { 
      12. 
  
  
  
  
    12.         mask-position: -100% 0; 
      13. 
  
  
  
  
    13.     } 
      14. 
  
  
  
  
    14.     100% { 
      15. 
  
  
  
  
    15.         mask-position: 0 0; 
      16. 
  
  
  
  
    16.     } 
      17. 
  
  
  
  
    17. } 
      18.

    也可以得到同样的效果：

    上述 DEMO 的完整代码：CodePen Demo -- Switch Picture[1]

    对强大的 mask 属性还不是太了解的，可以猛戳：奇妙的 CSS MASK[2]

    使用 resize 实现拖拽功能

    下一步则是最核心，最关键的一步，巧妙的使用 CSS resize 属性，实现拖拽控制元素的宽度。

    什么是 resize ?

    resize：该属性允许你控制一个元素的大小

    语法如下：

     
 
 
 
      
  
  
  
  
    1. { 
      2. 
  
  
  
  
    2. /* Keyword values */ 
      3. 
  
  
  
  
    3.   resize: none; 
      4. 
  
  
  
  
    4.   resize: both; 
      5. 
  
  
  
  
    5.   resize: horizontal; 
      6. 
  
  
  
  
    6.   resize: vertical; 
      7. 
  
  
  
  
    7.   resize: block; 
      8. 
  
  
  
  
    8.   resize: inline; 
      9. 
  
  
  
  
    9. } 
      10.

    看一个最简单的 DEMO：

     
 
 
 
      
  
  
  
  
    1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!
       
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. p { 
      2. 
  
  
  
  
    2.     width: 200px; 
      3. 
  
  
  
  
    3.     height: 200px; 
      4. 
  
  
  
  
    4.     resize: horizontal; 
      5. 
  
  
  
  
    5.     overflow: scroll; 
      6. 
  
  
  
  
    6. } 
      7.

    这里，我们设置了一个长宽为 200px 的

    为横向可拖拽改变宽度。效果如下：

    简单总结一些小技巧：