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

女爷i 2022-09-08 00:25 166阅读 0赞

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

![134613d4bb288c20ae78eb977c24745c.gif][]

## 思路 ##

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

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

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

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

<div class="g-outer">
        <div class="g-inner"></div>
    </div>

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

.g-outer {
        width: 650px;
        height: 340px;
        background-image: url(image1.png);
        overflow: hidden;
    }
    .g-inner {
        height: 340px;
        background: url(image2.png);
        animation: widthchange 3s infinite alternate linear;
    }
    @keyframes widthchange {
        0% {
            width: 650px;
        }
        100% {
            width: 0px;
        }
    }

效果如下：

![c7d88fc9583a56ba589e76b8a7d02fea.gif][]

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

.g-outer {
        background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);
    }
    .g-inner {
        background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);
        mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
        mask-size: 200% 100%;
        animation: maskChange 2s infinite alternate linear;
    }
    @keyframes maskChange {
        0% {
            mask-position: -100% 0;
        }
        100% {
            mask-position: 0 0;
        }
    }

也可以得到同样的效果：

![763e4e3382495aff899d3a443b114ae8.gif][]

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

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

## 使用 resize 实现拖拽功能 ##

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

### 什么是 `resize` ？ ###

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

语法如下：

{
    /* Keyword values */
      resize: none;
      resize: both;
      resize: horizontal;
      resize: vertical;
      resize: block;
      resize: inline;
    }

看一个最简单的 DEMO：

<p>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!</p>

p {
        width: 200px;
        height: 200px;
        resize: horizontal;
        overflow: scroll;
    }

这里，我们设置了一个长宽为 `200px` 的 `<p>` 为横向可拖拽改变宽度。效果如下：

![dc16048a3bf540fbea9897d833de86a0.gif][]

简单总结一些小技巧：

*  `resize` 的生效，需要配合 `overflow: scroll`。当然，准确的说法是，`overflow` 不是 `visible`，或者可以直接作用于替换元素譬如图像、`<video>` 及 `<iframe>`、`<textarea>` 等
 *  我们可以通过 `resize` 的 `horizontal`、`vertical`、`both` 来设置横向拖动、纵向拖动、横向纵向皆可拖动
 *  可以配合容器的 `max-width`、`min-width`、`max-height`、`min-height` 限制可拖拽改变的一个范围

### 将 resize 运用于图片拖拽切换 ###

OK，接下来，我们将 resize 运用于图片拖拽切换。

首先，还是上述的代码，我们将 resize 作用于子元素试试：

<div class="g-outer">
        <div class="g-inner width-change"></div>
    </div>

.g-outer {
        width: 650px;
        height: 340px;
        background-image: url(image1.png);
        overflow: hidden;
    }
    
    .g-inner {
        height: 340px;
        background: url(image2.png);
        resize: horizontal;
        overflow: scroll;
        max-width: 640px;
        min-width: 10px;
    }

可以看到，`g-inner` 设置了 `resize: horizontal`，将允许被横向拖动，实际的效果如下：

![842f105e4da80488d16566dcc78f311b.gif][]

嗯，非常接近了，因为需要配合 `overflow: scroll`，所以出现了恼人的滚动条，非常的不美观，我们得想办法干掉滚动条。

### 借助多一层嵌套及绝对定位实现隐藏滚动条 ###

隐藏滚动条的方式有很多，这里我们介绍其中一种巧妙的方式，我们对我们的结构进行一下改造，再叠加多一层 div：

<div class="g-outer">
        <div class="g-inner">
            <div class="g-resize"></div>
        </div>
    </div>

我们将控制拖拽这个功能交给 `g-resize`，它负责改变元素的宽度，而 `g-inner` 改为绝对定位，当 `g-resize` 的宽度增大时，其父元素 `g-inner` 也会随之增大，最后设置 `g-resize` 的 `opacity` 为 0 即可隐藏滚动条。

核心代码如下：

.g-outer {
        position: relative;
        width: 650px;
        height: 340px;
        background-image: url(image1.png);
        overflow: hidden;
    }
    .g-inner {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 0;
        max-width: 650px;
        height: 340px;
        background-image: url(image2.png);
    }
    .g-resize {
        position: relative;
        resize: horizontal;
        overflow: scroll;
        width: 0;
        height: 340px;
        max-width: 650px;
        min-width: 15px;
        animation: opacityChange 3s infinite alternate linear;
    }
    @keyframes opacityChange {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

这里，为了方便示意，我将 `opacity` 设置了一个渐隐渐现的动画效果，方便示意：

![86455c9e2fbc5c4ad05979563ea5ab70.gif][]

### 借助伪元素，显示拖拽条    ###

最后一步，由于完全隐藏了滚动条，用户也就不知道可以拖拽了，所以我们还需要绘制一个更为好看的拖拽条，这里延续上述的布局，给 `.g-inner` 再添加一个伪元素，绝对定位在元素最后即可：

.g-inner:before {
        content: "↔";
        position: absolute;
        background: rgba(0, 0, 0, 0.5);
        top: 0;
        right: 0;
        height: 100%;
        line-height: 340px;
    }

最终完美达成效果：

![a92671a0d101da170b16c24dd386e8fe.gif][]

完整详细的代码，你可以在我的 CSS 灵感\[3\]上看到：

CSS 灵感 -- 利用 resize 实现图片切换预览功能\[4\]

## 总结一下 ##

通过本文，你可以学会：

*  利用 resize 来实现容器大小的控制
 *  通过一些巧妙的方式来隐藏不太美观的滚动条
 *  以及配合上述的一些技巧，使用纯 CSS 实现图片拖拽切换预览功能

## 最后 ##

好了，本文到此结束，希望对你有帮助 :)

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

### 参考资料 ###

\[1\]

CodePen Demo -- Switch Picture: *https://codepen.io/Chokcoco/pen/RwVmPQw*

\[2\]

奇妙的 CSS MASK: *https://github.com/chokcoco/iCSS/issues/80*

\[3\]

CSS 灵感: *https://csscoco.com/inspiration/\#/*

\[4\]

CSS 灵感 -- 利用 resize 实现图片切换预览功能: *https://csscoco.com/inspiration/\#/./others/css-resize-switch-picture*

[![1c5d3ecd0243ff47b5009b208f9bd637.png][]][1c5d3ecd0243ff47b5009b208f9bd637.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![6b9fa7a6abec2b23e15a7cef15e22b8b.png][]

[134613d4bb288c20ae78eb977c24745c.gif]: /images/20220829/d4bf2d9d47c04ff892badba471a775ca.png
[c7d88fc9583a56ba589e76b8a7d02fea.gif]: /images/20220829/4d94fb6de4444c2ab6eadf44fab0add8.png
[763e4e3382495aff899d3a443b114ae8.gif]: /images/20220829/d56d21cc318f43e3af6f9bf673e0fe47.png
[dc16048a3bf540fbea9897d833de86a0.gif]: /images/20220829/699c3bbf5f714d86845f57261d822bbc.png
[842f105e4da80488d16566dcc78f311b.gif]: /images/20220829/12b3990fe2694b5594dc6bd138723462.png
[86455c9e2fbc5c4ad05979563ea5ab70.gif]: /images/20220829/6d4bbb364dd0487391812fd89fcfd301.png
[a92671a0d101da170b16c24dd386e8fe.gif]: /images/20220829/b8bd36ae9b83414fb8118890b192b9b0.png
[1c5d3ecd0243ff47b5009b208f9bd637.png]: /images/20220829/9d97b51e16bf4d5d84f1aa2fbc5dbebc.png
[1c5d3ecd0243ff47b5009b208f9bd637.png 1]: http://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw%3D%3D&chksm=cf61d698f8165f8e2b7f6cf4a638347c3b55b035e6c2095e477b217723cce34acbbe943ad537&idx=1&mid=2247496626&scene=21&sn=699dc2b117d43674b9e80a616199d5b6#wechat_redirect
[6b9fa7a6abec2b23e15a7cef15e22b8b.png]: /images/20220829/11131ec9fa23432390391c4c22a99f7c.png