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

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

開發(fā) 前端

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

[[419852]]

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

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

思路

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

將兩張圖片疊加在一起
改變上層圖片的寬度，或者使用 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 遮罩的方式也非常輕松的可以實現(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]

對強大的 mask 屬性還不是太了解的，可以猛戳：奇妙的 CSS MASK[2]

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

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

什么是 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; 
}

這里，我們設(shè)置了一個長寬為 200px 的

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

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

resize 的生效，需要配合 overflow: scroll。當(dāng)然，準(zhǔn)確的說法是，overflow 不是 visible，或者可以直接作用于替換元素譬如圖像、<video> 及 <iframe>、<textarea> 等
我們可以通過 resize 的 horizontal、vertical、both 來設(shè)置橫向拖動、縱向拖動、橫向縱向皆可拖動
可以配合容器的 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 設(shè)置了 resize: horizontal，將允許被橫向拖動，實際的效果如下：

嗯，非常接近了，因為需要配合 overflow: scroll，所以出現(xiàn)了惱人的滾動條，非常的不美觀，我們得想辦法干掉滾動條。

借助多一層嵌套及絕對定位實現(xiàn)隱藏滾動條

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

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

我們將控制拖拽這個功能交給 g-resize，它負(fù)責(zé)改變元素的寬度，而 g-inner 改為絕對定位，當(dāng) g-resize 的寬度增大時，其父元素 g-inner 也會隨之增大，最后設(shè)置 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 設(shè)置了一個漸隱漸現(xiàn)的動畫效果，方便示意：

借助偽元素，顯示拖拽條

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

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

最終完美達(dá)成效果：

完整詳細(xì)的代碼，你可以在我的 CSS 靈感[3]上看到：

CSS 靈感 -- 利用 resize 實現(xiàn)圖片切換預(yù)覽功能[4]

總結(jié)一下

通過本文，你可以學(xué)會：

利用 resize 來實現(xiàn)容器大小的控制
通過一些巧妙的方式來隱藏不太美觀的滾動條
以及配合上述的一些技巧，使用純 CSS 實現(xiàn)圖片拖拽切換預(yù)覽功能

最后

好了，本文到此結(jié)束，希望對你有幫助 :)

參考資料

[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 實現(xiàn)圖片切換預(yù)覽功能:

https://csscoco.com/inspiration/#/./others/css-resize-switch-picture

責(zé)任編輯：姜華來源： iCSS前端趣聞

CSS 技巧 resize

自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡