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

来源: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>

關閉動畫

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

實現方式

  • 點擊圖片的時候獲取原圖的寬度，以及距離視窗left，top的距離
  • 點擊蒙層的時候將克隆圖片的位置移動到原圖的位置（根據前面獲取的原圖位置）
  • 當克隆圖片回到原圖的位置時，需要將原圖進行顯示。使用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之MVCC總結理解
    MySQL中既存在redo log，又存在bin log，這是因為bin log是MySQL Server提供的一種歸檔日誌，其本身並不具備crash-safe能力。而redo log本身不具備歸檔能力，他是一種迴圈寫的日誌。 MySQL通過將這兩種日誌整合起來，並通過兩階段提交的機制，保證了數據... ...
  • SQLSERVER 的 nolock 到底是怎樣的無鎖？
    一：背景 1. 講故事 相信絕大部分用 SQLSERVER 作為底層存儲的程式員都知道 nolock 關鍵詞，即使當時不知道也會在踩過若幹阻塞坑之後果斷的加上 nolock，但這玩意有什麼註意事項呢？這就需要瞭解它的底層原理了。 二：nolock 的原理 1. sql 阻塞還原 為了方便講述，先創建 ...
  • Redis - 介紹與使用場景
    Redis 每秒可以處理超過 10 萬次讀寫操作，是已知性能最快的 key-value 資料庫，稱得上是必須要學會的知識。 ...
  • 音頻編輯服務UI SDK接入指導及常見問題
    華為 HMS Core 音頻編輯服務（Audio Editor Kit）是華為幫助全球開發者快速構建各類應用音頻能力的服務，匯聚了華為在音樂、語音等相關音頻領域的先進技術。音頻編輯服務為開發者們提供音頻基礎編輯、AI配音、音源分離、空間渲染、變聲、多種音效等豐富的音頻處理能力，以及性能優異、簡單易用 ...
  • 使用VS Code創建第一個Flutter工程
    一、前言 你可以使用任意文本編輯器，再結合命令行工具來開發 Flutter 應用。然而，我們推薦使用本文接下來介紹的編輯器插件以獲取更好的開發體驗。這些插件提供了代碼補全、代碼高亮、widget 輔助編輯的功能，以及為項目的運行和調試提供支持等。 推薦的開發工具有 VS Code、Android S ...
  • uni-app在跨平臺小程式中的實踐
    隨著移動互聯網的高速發展，各家大廠的小程式百花齊放，在用戶規模及商業化方面都取得了極大的成功。微信小程式的日活超過5億，其他追趕者如：支付寶、百度、位元組跳動小程式的月活也紛紛超過3億。鑒於小程式相比App，無需下載等待，有更高的激活率，相比H5有更好的下單轉化率，汽車報價業務線藉助各平臺的優勢，大力... ...
  • antd 3.x升4.x踩坑之路～
    我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 相容性問題 第三方依賴相容問題 React - 最低 v16.9，部分組件使用 hooks 重構 react升級相關文檔 Less - 最低 v3.1.0，建議升級到 ...
  • 如何手動補充陳年老庫（或純 JS 代碼）的 TypeScript 類型？
    這篇僅為自己工作中在 js 和 ts 交叉鬥智鬥勇的實踐中留下的經驗，不一定完全、合理，僅供參考，有錯漏難免，有則評論區指出。 前置知識 - JavaScript 的各種模塊化情況 全局模塊，在 globalThis 上可以訪問，一般是 iife 庫程式 ES 模塊 CommonJS 模塊 前置知識 ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類