使用 Resize 實(shí)現(xiàn)強(qiáng)大的圖片拖拽切換預(yù)覽功能

作者：SbCoco 2021-08-27 08:38:10

開發(fā) 前端

本文將介紹一個(gè)非常有意思的功能，使用純 CSS 利用 resize 實(shí)現(xiàn)強(qiáng)大的圖片切換預(yù)覽功能。利用 resize 來實(shí)現(xiàn)容器大小的控制。

[[419852]]

Hello 大家好，我是 Coco，今天給大家?guī)硪粋€(gè)巧妙的小技巧。

本文將介紹一個(gè)非常有意思的功能，使用純 CSS 利用 resize 實(shí)現(xiàn)強(qiáng)大的圖片切換預(yù)覽功能。類似于這樣：

思路

首先，要實(shí)現(xiàn)這樣一個(gè)效果如果不要求可以拖拽，其實(shí)有非常多的辦法。

將兩張圖片疊加在一起
改變上層圖片的寬度，或者使用 mask，改變 mask 的透明度區(qū)間變化

兩種方式都簡單示意一下。

假設(shè)我們的結(jié)構(gòu)如下，分別使用 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; 
    } 
}

效果如下：

當(dāng)然，使用 mask 遮罩的方式也非常輕松的可以實(shí)現(xiàn)類似的效果：

.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; 
    } 
}

也可以得到同樣的效果：

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

對(duì)強(qiáng)大的 mask 屬性還不是太了解的，可以猛戳：奇妙的 CSS MASK[2]

使用 resize 實(shí)現(xiàn)拖拽功能

下一步則是最核心，最關(guān)鍵的一步，巧妙的使用 CSS resize 屬性，實(shí)現(xiàn)拖拽控制元素的寬度。

什么是 resize ?

resize：該屬性允許你控制一個(gè)元素的大小

語法如下：

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

看一個(gè)最簡單的 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; 
}

這里，我們?cè)O(shè)置了一個(gè)長寬為 200px 的

為橫向可拖拽改變寬度。效果如下：

簡單總結(jié)一些小技巧：

resize 的生效，需要配合 overflow: scroll。當(dāng)然，準(zhǔn)確的說法是，overflow 不是 visible，或者可以直接作用于替換元素譬如圖像、<video> 及 <iframe>、<textarea> 等
我們可以通過 resize 的 horizontal、vertical、both 來設(shè)置橫向拖動(dòng)、縱向拖動(dòng)、橫向縱向皆可拖動(dòng)
可以配合容器的 max-width、min-width、max-height、min-height 限制可拖拽改變的一個(gè)范圍

將 resize 運(yùn)用于圖片拖拽切換

OK，接下來，我們將 resize 運(yùn)用于圖片拖拽切換。

首先，還是上述的代碼，我們將 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 設(shè)置了 resize: horizontal，將允許被橫向拖動(dòng)，實(shí)際的效果如下：

嗯，非常接近了，因?yàn)樾枰浜?overflow: scroll，所以出現(xiàn)了惱人的滾動(dòng)條，非常的不美觀，我們得想辦法干掉滾動(dòng)條。

借助多一層嵌套及絕對(duì)定位實(shí)現(xiàn)隱藏滾動(dòng)條

隱藏滾動(dòng)條的方式有很多，這里我們介紹其中一種巧妙的方式，我們對(duì)我們的結(jié)構(gòu)進(jìn)行一下改造，再疊加多一層 div：

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

我們將控制拖拽這個(gè)功能交給 g-resize，它負(fù)責(zé)改變?cè)氐膶挾龋?g-inner 改為絕對(duì)定位，當(dāng) g-resize 的寬度增大時(shí)，其父元素 g-inner 也會(huì)隨之增大，最后設(shè)置 g-resize 的 opacity 為 0 即可隱藏滾動(dòng)條。

核心代碼如下：

.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 設(shè)置了一個(gè)漸隱漸現(xiàn)的動(dòng)畫效果，方便示意：

借助偽元素，顯示拖拽條

最后一步，由于完全隱藏了滾動(dòng)條，用戶也就不知道可以拖拽了，所以我們還需要繪制一個(gè)更為好看的拖拽條，這里延續(xù)上述的布局，給 .g-inner 再添加一個(gè)偽元素，絕對(duì)定位在元素最后即可：

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