記錄--手把手教學,實現一個優雅的圖片預覽

来源:https://www.cnblogs.com/smileZAZ/archive/2023/01/31/17079921.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 在我們開發項目中,經常會遇到預覽圖片的需求。也就是點擊圖片,會全屏顯示該圖片。需求很簡單,但是如何讓實現更優雅就需要花點心思了。 最終效果圖 基礎版本 實現方式 點擊圖片,創建蒙層,克隆圖片 將圖片添加定位屬性,並添加到蒙層中 將蒙層添加 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

在我們開發項目中,經常會遇到預覽圖片的需求。也就是點擊圖片,會全屏顯示該圖片。需求很簡單,但是如何讓實現更優雅就需要花點心思了。

最終效果圖

4.gif

基礎版本

實現方式

  • 點擊圖片,創建蒙層,克隆圖片
  • 將圖片添加定位屬性,並添加到蒙層中
  • 將蒙層添加到body中

觀察下圖發現,雖然實現了需求,但是動畫很生硬,我們作為前端開發工程師,得對得起工程師的身份,需要有工匠精神,接下來將介紹如何實現優雅的圖片預覽效果。

效果圖

1.gif

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <title>基礎版本</title>
  <style>
    .pic1 {
      width: 400px;
    }
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
    }
    .previewImg {
      position: absolute;
      width: 80%;
      left: 50%;
      top: 200px;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
  <img class="pic1" src="./xtjj.jpg" alt="">
  <script>
    const pic1 = document.querySelector(".pic1");
    pic1.addEventListener("click", function () {
      // 創建蒙層
      const mask = document.createElement("div")
      mask.classList.add("mask");
      const pic1Clone = pic1.cloneNode();
      pic1Clone.classList.add("previewImg");
      // 將圖片和蒙層添加到頁面中
      mask.appendChild(pic1Clone)
      document.body.appendChild(mask)

      mask.addEventListener("click", function () {
        document.body.removeChild(this)
      })
    })
  </script>
</body>
</html>

打開動畫

實現方式

  • 點擊圖片
    • 克隆原圖,計算原圖當前距離視窗的top與left的距離(用於確定克隆圖片的初始位置)
    • 計算克隆圖片的初始位置以及其相關屬性
    • 創建蒙層,並添加相關的定位,背景色屬性
    • 使用setTimeout是為了觸發transition,產生移動效果。
    • 並且在setTimeout最開始將原圖進行隱藏,產生是原圖移動到屏幕中心的效果。使用visibility屬性,避免引起頁面佈局變化。
  • 為蒙層添加點擊事件
    • 點擊蒙層後,刪除蒙層元素,實現關閉預覽功能

效果圖

2.gif

代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <title>添加預覽動畫</title>
  <style>
    .pic {
      width: 400px;
    }
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      transition: all .3s;
    }
    .previewImg {
      position: absolute;
      transform: translateX(-50%);
      transition: all .3s;
    }
  </style>
</head>
<body>
  <img class="pic" src="./xtjj.jpg" alt="">
  <script>
    const pic = document.querySelector(".pic");
    pic.addEventListener("click", function () {
      // 1,克隆元素
      const pic2 = pic.cloneNode();
      // 2,計算原圖距離視窗left,top的距離
      picToTop = pic.getBoundingClientRect().x;
      picToLeft = pic.getBoundingClientRect().y;
      // 3,設置克隆圖片初始位置
      pic2.style.position = "absolute";
      pic2.style.left = `${picToLeft}px`;
      pic2.style.top = `${picToTop}px`;
      // 4,創建蒙層
      const mask = document.createElement("div")
      mask.classList.add("mask");
      // 5,將元素添加到body中
      mask.appendChild(pic2)
      document.body.appendChild(mask)
      // 6,使用setTimeout是為了觸發`transition`,產生動畫
      setTimeout(() => {
        // 7,隱藏原圖片
        pic.style.visibility = "hidden";
        // 8,設置預覽圖片展示寬度以及位置
        pic2.style.width = "80%";
        pic2.style.left = "50%";
        pic2.style.top = `200px`;
        pic2.classList.add("previewImg");
      }, 0);
      // 9,點擊蒙層關閉預覽
      mask.addEventListener("click", function () {
        this.remove()
      })
    })
  </script>
</body>
</html>

關閉動畫

上一個步驟中,實現了點擊圖片,圖片流暢顯示的動畫。但是關閉的時候很突然,這次將實現關閉的流暢動畫。

實現方式

  • 點擊圖片的時候獲取原圖的寬度,以及距離視窗lefttop的距離
  • 點擊蒙層的時候將克隆圖片的位置移動到原圖的位置(根據前面獲取的原圖位置)
  • 當克隆圖片回到原圖的位置時,需要將原圖進行顯示。使用visibility屬性。
  • 使用setTimeout的原因是觸發transition,產生動畫效果。
  • 使用300毫秒是因為transition設置的是300毫秒的過渡時間,為了能在克隆圖片會到原圖位置的時候,再顯示原圖,並刪除蒙層。

效果圖

3.gif

代碼

查看下個步驟

滾動時取消預覽

實現方式

  • 在點擊圖片的時候,存儲當前頁面滾動的距離:lastPositon

  • 監聽滾動事件,當滾動的距離減去lastPositon的值,大於100px的時候,觸發矇層的點擊事件

  • 蒙層收到點擊動作後,會執行取消預覽的一系列動作。

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <title>滾動時取消預覽</title>
  <style>
    body {
      height: 1000px;
    }
    .pic {
      width: 400px;
    }
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      transition: all .3s;
    }
  </style>
</head>
<body>
  <img class="pic" src="./xtjj.jpg" alt="">
  <script>
    // 16,滾動超過100px。就取消預覽
    window.onscroll = (e) => {
      if (Math.abs(window.pageYOffset - lastPositon) > 100) {
        document.querySelector(".mask")?.click();
      }
    }
    // 14,預覽圖片前頁面滾動距離初始值
    let lastPositon = 0;
    const pic = document.querySelector(".pic");
    pic.addEventListener("click", function () {
      // 15,計算預覽圖片前頁面滾動距離
      lastPositon = window.pageYOffset;
      // 1,克隆元素
      const pic2 = pic.cloneNode();
      // 2,計算原圖距離視窗left,top的距離
      picToTop = pic.getBoundingClientRect().x;
      picToLeft = pic.getBoundingClientRect().y;
      // 11,計算原圖寬度
      picWidth = pic.width;
      // 3,設置克隆圖片初始位置
      pic2.style.position = "absolute";
      pic2.style.left = `${picToLeft}px`;
      pic2.style.top = `${picToTop}px`;
      // 4,創建蒙層
      const mask = document.createElement("div")
      mask.classList.add("mask");
      // 5,將元素添加到body中
      mask.appendChild(pic2)
      document.body.appendChild(mask)
      // 6,使用setTimeout是為了觸發`transition`,產生動畫
      setTimeout(() => {
        // 7,隱藏原圖片
        pic.style.visibility = "hidden";
        // 8,設置預覽圖片展示寬度以及位置
        pic2.style.position = "absolute";
        pic2.style.transition = "all .3s";
        pic2.style.transform = "translateX(-50%)";
        pic2.style.width = "80%";
        pic2.style.left = "50%";
        pic2.style.top = `200px`;
      }, 0);
      // 9,點擊蒙層關閉預覽
      mask.addEventListener("click", function () {
        // 10,預覽圖回到原圖位置
        pic2.style.width = `${picWidth}px`;
        pic2.style.left = `${picToLeft}px`;
        pic2.style.top = `${picToTop}px`;
        pic2.style.transform = "";
        // 12,顯示原圖
        setTimeout(() => {
          pic.style.visibility = "visible";
          // 13,刪除蒙層以及預覽圖
          this.remove()
        }, 300);
      })
    })
  </script>
</body>
</html>

本文轉載於:

https://juejin.cn/post/7155789252075356190

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL中既存在redo log,又存在bin log,這是因為bin log是MySQL Server提供的一種歸檔日誌,其本身並不具備crash-safe能力。而redo log本身不具備歸檔能力,他是一種迴圈寫的日誌。 MySQL通過將這兩種日誌整合起來,並通過兩階段提交的機制,保證了數據... ...
  • 一:背景 1. 講故事 相信絕大部分用 SQLSERVER 作為底層存儲的程式員都知道 nolock 關鍵詞,即使當時不知道也會在踩過若幹阻塞坑之後果斷的加上 nolock,但這玩意有什麼註意事項呢?這就需要瞭解它的底層原理了。 二:nolock 的原理 1. sql 阻塞還原 為了方便講述,先創建 ...
  • Redis 每秒可以處理超過 10 萬次讀寫操作,是已知性能最快的 key-value 資料庫,稱得上是必須要學會的知識。 ...
  • 華為 HMS Core 音頻編輯服務(Audio Editor Kit)是華為幫助全球開發者快速構建各類應用音頻能力的服務,匯聚了華為在音樂、語音等相關音頻領域的先進技術。音頻編輯服務為開發者們提供音頻基礎編輯、AI配音、音源分離、空間渲染、變聲、多種音效等豐富的音頻處理能力,以及性能優異、簡單易用 ...
  • 一、前言 你可以使用任意文本編輯器,再結合命令行工具來開發 Flutter 應用。然而,我們推薦使用本文接下來介紹的編輯器插件以獲取更好的開發體驗。這些插件提供了代碼補全、代碼高亮、widget 輔助編輯的功能,以及為項目的運行和調試提供支持等。 推薦的開發工具有 VS Code、Android S ...
  • 隨著移動互聯網的高速發展,各家大廠的小程式百花齊放,在用戶規模及商業化方面都取得了極大的成功。微信小程式的日活超過5億,其他追趕者如:支付寶、百度、位元組跳動小程式的月活也紛紛超過3億。鑒於小程式相比App,無需下載等待,有更高的激活率,相比H5有更好的下單轉化率,汽車報價業務線藉助各平臺的優勢,大力... ...
  • 我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 相容性問題 第三方依賴相容問題 React - 最低 v16.9,部分組件使用 hooks 重構 react升級相關文檔 Less - 最低 v3.1.0,建議升級到 ...
  • 這篇僅為自己工作中在 js 和 ts 交叉鬥智鬥勇的實踐中留下的經驗,不一定完全、合理,僅供參考,有錯漏難免,有則評論區指出。 前置知識 - JavaScript 的各種模塊化情況 全局模塊,在 globalThis 上可以訪問,一般是 iife 庫程式 ES 模塊 CommonJS 模塊 前置知識 ...
一周排行
    -Advertisement-
    Play Games
  • 在本篇教程中,我們學習瞭如何使用 Taurus.MVC WebMVC 框架創建一個簡單的頁面。 我們創建了一個控制器並編寫了一個用於呈現頁面的方法,然後創建了對應的視圖,並最終成功運行了應用程式。 在下一篇教程中,我們將繼續探索 Taurus.MVC WebMVC 框架的更多功能和用法。 ...
  • 一:背景 1. 講故事 很多.NET開發者在學習高級調試的時候,使用sos的命令輸出會發現這裡也看不懂那裡也看不懂,比如截圖中的這位朋友。 .NET高級調試屬於一個偏冷門的領域,國內可觀測的資料比較少,所以很多東西需要你自己去探究源代碼,然後用各種調試工具去驗證,相關源代碼如下: coreclr: ...
  • 我一直都以為c中除以2的n次方可以使用右移n位代替,然而在實際調試中發現並不都是這樣的。是在計算餘數是發現了異常 被除數:114325068 右移15計算結果:3488 除法取整計算結果:3489 右移操作計算餘數:33772 除法取整計算餘數:1005 顯然:這是不一樣的。 移位操作是一條cpu指 ...
  • 在上一篇文章中,我們介紹了ReentrantLock類的一些基本用法,今天我們重點來介紹一下ReentrantLock其它的常用方法,以便對ReentrantLock類的使用有更深入的理解。 ...
  • Excelize 是 Go 語言編寫的用於操作電子錶格辦公文檔的開源基礎庫,2024年2月26日,社區正式發佈了 2.8.1 版本,該版本包含了多項新增功能、錯誤修複和相容性提升優化。 ...
  • 雲採用框架(Cloud Adoption Framework,簡稱CAF)為企業上雲提供策略和技術的指導原則和最佳實踐,幫助企業上好雲、用好雲、管好雲,併成功實現業務目標。本雲採用框架是基於服務大量企業客戶的經驗總結,將企業雲採用分為四個階段,並詳細探討企業應在每個階段採取的業務和技術策略;同時,還 ...
  • 與TXT文本文件,PDF文件更加專業也更適合傳輸,常用於正式報告、簡歷、合同等場合。項目中如果有使用Java將TXT文本文件轉為PDF文件的需求,可以查看本文中介紹的免費實現方法。 免費Java PDF庫 本文介紹的方法需要用到Free Spire.PDF for Java,該免費庫支持多種操作、轉 ...
  • 指針和引用 當我們需要在程式中傳遞變數的地址時,可以使用指針或引用。它們都可以用來間接訪問變數,但它們之間有一些重要的區別。 指針是一個變數,它存儲另一個變數的地址。通過指針,我們可以訪問存儲在該地址中的變數。指針可以被重新分配,可以指向不同的變數,也可以為NULL。指針使用*運算符來訪問存儲在地址 ...
  • 即使再小再簡單的需求,作為研發開發完畢之後,我們可以直接上線麽?其實很多時候事故往往就是由於“不以為意”發生的。事故的發生往往也遵循“墨菲定律”,這就要求我們更要敬畏線上,再小的需求點都需要經過嚴格的測試驗證才能上線。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、是什麼 許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保用戶只能訪問到被分配的資源 而前端許可權歸根結底是請求的發起權,請求的發起可能有下麵兩種形式觸發 頁面載入觸發 頁面上的按鈕點擊觸發 總的來說,所有的請求發起都觸發自前端路由或 ...