CSS 使用 resize 實現圖片拖拽切換預覽功能(強大功能)

  發布時間:2021-08-18 17:07:13   作者:ChokCoco   我要評論
這篇文章主要介紹了CSS 使用 resize 實現圖片拖拽切換預覽功能(強大功能),本文通過圖文實例相結合給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

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

思路

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

  • 將兩張圖片疊加在一起
  • 改變上層圖片的寬度,或者使用 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;
    }
}

效果如下:

當然,使用 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,當然,準確的說法是,overflow 不是 visible,或者可以直接作用于替換元素譬如圖像、<video><iframe><textarea>
  • 我們可以通過 resizehorizontalverticalboth 來設置橫向拖動、縱向拖動、橫向縱向皆可拖動。
  • 可以配合容器的 max-widthmin-widthmax-heightmin-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-resizeopacity 為 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 訂閱收藏。

到此這篇關于CSS 使用 resize 實現圖片拖拽切換預覽功能(強大功能)的文章就介紹到這了,更多相關css resize圖片拖拽切換預覽內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

相關文章

  • 如何使用 resize 實現圖片切換預覽功能

    這篇文章主要介紹了如何使用 resize 實現圖片切換預覽功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-08-18

最新評論

精品国内自产拍在线观看