CSS 奇思妙想 | 使用 resize 實現強大的圖片拖拽切換預覽功能

ChokCoco發表於2021-08-17
CSS

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

思路

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

  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;
}
.mask-change {
    mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
    mask-size: 200% 100%;
    animation: maskChange 3s infinite alternate linear;
}
@keyframes widthchange {
    0% {
        width: 650px;
    }
    100% {
        width: 0px;
    }
}

效果如下：

當然，使用 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;
    }
}

也可以得到同樣的效果：

上述 DEMO 的完整程式碼：CodePen Demo -- Switch Picture

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

使用 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> 為橫向可拖拽改變寬度。效果如下：

簡單總結一些小技巧：

  • resize 的生效，需要配合 overflow: scroll
  • 我們可以通過 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，將允許被橫向拖動，實際的效果如下：

嗯，非常接近了，因為需要配合 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 設定了一個漸隱漸現的動畫效果，方便示意：

藉助偽元素，顯示拖拽條

最後一步，由於完全隱藏了滾動條，使用者也就不知道可以拖拽了，所以我們還需要繪製一個更為好看的拖拽條，這裡延續上述的佈局，給 .g-inner 再新增一個偽元素，絕對定位在元素最後即可：

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

最終完美達成效果：

完整詳細的程式碼，你可以在我的 CSS 靈感上看到：

CSS 靈感 -- 利用 resize 實現圖片切換預覽功能

總結一下

通過本文，你可以學會：

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

最後

好了，本文到此結束，希望對你有幫助 ?

更多精彩 CSS 效果可以關注我的 CSS 靈感

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章