日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
使用Resize實(shí)現(xiàn)強(qiáng)大的圖片拖拽切換預(yù)覽功能

Hello 大家好，我是 Coco，今天給大家?guī)?lái)一個(gè)巧妙的小技巧。

創(chuàng)新互聯(lián)建站專注于南安企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。南安網(wǎng)站建設(shè)公司,為南安等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

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

思路

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

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

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

假設(shè)我們的結(jié)構(gòu)如下，分別使用 background 展示兩張圖片：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.     
 
  •  

    方法一，改變上層圖片的寬度的方式：

     
 
 
 
      
  
  
  
  
    1. .g-outer { 
      2. 
  
  
  
  
    2.     width: 650px; 
      3. 
  
  
  
  
    3.     height: 340px; 
      4. 
  
  
  
  
    4.     background-image: url(image1.png); 
      5. 
  
  
  
  
    5.     overflow: hidden; 
      6. 
  
  
  
  
    6. } 
      7. 
  
  
  
  
    7. .g-inner { 
      8. 
  
  
  
  
    8.     height: 340px; 
      9. 
  
  
  
  
    9.     background: url(image2.png); 
      10. 
  
  
  
  
    10.     animation: widthchange 3s infinite alternate linear; 
      11. 
  
  
  
  
    11. } 
      12. 
  
  
  
  
    12. @keyframes widthchange { 
      13. 
  
  
  
  
    13.     0% { 
      14. 
  
  
  
  
    14.         width: 650px; 
      15. 
  
  
  
  
    15.     } 
      16. 
  
  
  
  
    16.     100% { 
      17. 
  
  
  
  
    17.         width: 0px; 
      18. 
  
  
  
  
    18.     } 
      19. 
  
  
  
  
    19. } 
      20.

    效果如下：

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

     
 
 
 
      
  
  
  
  
    1. .g-outer { 
      2. 
  
  
  
  
    2.     background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png); 
      3. 
  
  
  
  
    3. } 
      4. 
  
  
  
  
    4. .g-inner { 
      5. 
  
  
  
  
    5.     background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png); 
      6. 
  
  
  
  
    6.     mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%); 
      7. 
  
  
  
  
    7.     mask-size: 200% 100%; 
      8. 
  
  
  
  
    8.     animation: maskChange 2s infinite alternate linear; 
      9. 
  
  
  
  
    9. } 
      10. 
  
  
  
  
    10. @keyframes maskChange { 
      11. 
  
  
  
  
    11.     0% { 
      12. 
  
  
  
  
    12.         mask-position: -100% 0; 
      13. 
  
  
  
  
    13.     } 
      14. 
  
  
  
  
    14.     100% { 
      15. 
  
  
  
  
    15.         mask-position: 0 0; 
      16. 
  
  
  
  
    16.     } 
      17. 
  
  
  
  
    17. } 
      18.

    也可以得到同樣的效果：

    上述 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è)元素的大小

    語(yǔ)法如下：

     
 
 
 
      
  
  
  
  
    1. { 
      2. 
  
  
  
  
    2. /* Keyword values */ 
      3. 
  
  
  
  
    3.   resize: none; 
      4. 
  
  
  
  
    4.   resize: both; 
      5. 
  
  
  
  
    5.   resize: horizontal; 
      6. 
  
  
  
  
    6.   resize: vertical; 
      7. 
  
  
  
  
    7.   resize: block; 
      8. 
  
  
  
  
    8.   resize: inline; 
      9. 
  
  
  
  
    9. } 
      10.

    看一個(gè)最簡(jiǎn)單的 DEMO：

     
 
 
 
      
  
  
  
  
    1. 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!
       
      2. 
 
 
 
 
     
 
 
 
      
  
  
  
  
    1. p { 
      2. 
  
  
  
  
    2.     width: 200px; 
      3. 
  
  
  
  
    3.     height: 200px; 
      4. 
  
  
  
  
    4.     resize: horizontal; 
      5. 
  
  
  
  
    5.     overflow: scroll; 
      6. 
  
  
  
  
    6. } 
      7.

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

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

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

    • resize 的生效，需要配合 overflow: scroll。當(dāng)然，準(zhǔn)確的說(shuō)法是，overflow 不是 visible，或者可以直接作用于替換元素譬如圖像、