欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

  發(fā)布時(shí)間：2021-08-18 17:07:13   作者：ChokCoco   我要評(píng)論
這篇文章主要介紹了CSS 使用 resize 實(shí)現(xiàn)圖片拖拽切換預(yù)覽功能(強(qiáng)大功能),本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

思路

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

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

兩種方式都簡(jiǎn)單示意一下。

假設(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

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

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

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

什么是 resize ？

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

語(yǔ)法如下：

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

看一個(gè)最簡(jiǎn)單的 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è)長(zhǎng)寬為 200px 的 <p> 為橫向可拖拽改變寬度。效果如下：

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

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

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

OK，接下來(lái)，我們將 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;
}

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

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

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

總結(jié)一下

通過(guò)本文，你可以學(xué)會(huì)：

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

最后

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

更多精彩 CSS 效果可以關(guān)注我的 CSS 靈感

更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。

到此這篇關(guān)于CSS 使用 resize 實(shí)現(xiàn)圖片拖拽切換預(yù)覽功能(強(qiáng)大功能)的文章就介紹到這了,更多相關(guān)css resize圖片拖拽切換預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 純 CSS 實(shí)現(xiàn)拖拽效果的代碼

    這篇文章主要介紹了純 CSS 實(shí)現(xiàn)拖拽效果的代碼,本文通過(guò)圖文案例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-02-25

  • 純CSS實(shí)現(xiàn)左右拖拽改變布局大小

    這篇文章主要介紹了純CSS實(shí)現(xiàn)左右拖拽改變布局大小,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)
    2020-06-12

  • CSS 鼠標(biāo)點(diǎn)擊拖拽效果的實(shí)現(xiàn)代碼

    這篇文章主要介紹了CSS 鼠標(biāo)點(diǎn)擊拖拽效果,我們還是僅僅通過(guò) CSS，來(lái)實(shí)現(xiàn)一種絲滑的鼠標(biāo)點(diǎn)擊拖動(dòng)元素移動(dòng)的效果，本文通過(guò)實(shí)例代碼效果展示給大家介紹的非常詳細(xì)，對(duì)大家的
    2022-10-10

最新評(píng)論