使用 JavaScript 實現具有淡入淡出效果的圖像過渡-js教程-PHP中文網

首頁

web前端

js教程

使用 JavaScript 實現具有淡入淡出效果的圖像過渡

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 04:21 PM

使用 JavaScript 实现具有淡入淡出效果的图像过渡

影像轉換意味著更改影像並將一張影像替換為另一張影像。使用者可以在圖像滑桿中看到圖像過渡。

在開發圖像滑桿時，我們應該專注於圖像過渡的動畫，以使應用程式具有有吸引力的用戶體驗。在本教程中，我們將學習使用各種圖像過渡方法添加淡入淡出效果。

為影像新增類別以顯示具有淡入淡出效果的影像

我們可以使用 CSS 為圖像過渡添加淡入淡出效果。 CSS 的過渡屬性允許我們向圖像添加任何過渡。因此，我們可以將 CSS 添加到一個類，並使用 JavaScript，我們可以將一個類別添加到圖像，這將為圖像添加一個過渡

文法

使用者可以按照下面的語法向圖像添加一個類，以顯示具有淡入淡出效果的圖像。

document.getElementById("image").classList = 'class_name';

在上面的語法中，我們使用 id 存取映像並將「class_name」類別新增到映像的類別清單中。

範例

在下面的範例中，我們為網頁新增了圖像，並使用一些 CSS 給圖像指定了高度和寬度。此外，我們還在 img 類別中加入了值為 0 的不透明度。

此外，我們也為動畫類別新增了「transition」和「opacity」屬性。最初，圖像不包含“animate”類別。當使用者按一下該按鈕時，它會執行 FadeIn() 函數，將「animate」類別新增至圖像。

在輸出中，我們可以觀察到當我們新增「animate」類別時圖像會淡入。

<html>
<head>
   <style>
      img {
         opacity: 0;
      }
      .animate {
         -webkit-transition: 2s;
         transition: 2s;
         opacity: 1;
      }
   </style>
</head>
<body>
   <h2 id="Using-the-i-class-i-to-add-fadding-effect-in-image-transition"> Using the <i> class </i> to add fadding effect in image transition </h2>
   <img id = "image" style = "width: 500px; height: 200px;" src = "https://www.tutorialspoint.com/static/images/logo-color.png" alt = "Logo Image"> <br>
   <button type = "button" onclick = "FadeIn()"> Fade In image </button>
   <script>
      function FadeIn() {
         document.getElementById("image").classList = 'animate';
      }
   </script>
</body>
</html>

使用 jQuery 的 fadeIn() 和 fadeout() 方法為圖像添加淡入淡出過渡

JQuery的fadeout()方法允許我們以淡入淡出的效果從網頁中刪除圖像。 fadeIn() 方法讓我們可以在網頁上新增具有淡入淡出效果的圖片。

在這裡，我們將使用 fadeout() 和 fadeIn() 方法為影像過渡添加適當的淡入淡出效果。

文法

使用者可以依照下列語法使用JQuery的fadeout()和fadeIn()方法為影像過渡添加淡入淡出效果。

setInterval(fade, 3500);
function fade() {
   $("#slider img").eq(current).fadeOut(0);
   current = ++current % images.length;
   $("#slider img").eq(current).fadeIn(2000);
}

在上面的語法中，當前變數追蹤要在網頁上顯示的圖像。我們使用 fadeIn() 方法顯示目前影像並隱藏所有其他影像。

步驟

第 1 步 – 使用類別名稱存取所有映像。

第 2 步 – 使用 for 迴圈迭代所有圖像，並使用圖像的 display 屬性隱藏除第一張圖像之外的所有圖像。

第 3 步 – 建立一個名為「current」的變數並將其初始化為零。

步驟 4 – 建立一個 startImageTrans() 函數，並使用其中的 setInterval() 方法在每 3500 毫秒後呼叫 fade() 函數。不過，使用者可以依照自己的需求設定時間間隔

步驟 5 – 在 fade() 函數內，使用 JQuery 的 eq() 方法存取目前子層級。使用 fadeout() 方法隱藏目前影像。

步驟6 – 將目前變數的值增加1，如果它大於圖總數，則將其設為0。

第 7 步 – 使用 fadeIn() 方法顯示目前影像。

範例

在下面的範例中，我們建立了 HTML div 元素並新增了五個不同的圖像。我們在 JavaScript 中對所有圖像一一實現了上述演算法，並具有淡入淡出過渡效果。

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <style>
      img {
         height: 200px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-i-jQuery-fadeIn-method-i-to-add-fadding-effect-in-image-transition"> Using the <i> jQuery fadeIn() method </i> to add fadding effect in image transition </h3>
   <div id="slider">
      <img src = "https://www.tutorialspoint.com/static/images/logocolor.png" class = "sliderImage" alt = "Image 1">
      <img src ="https://www.tutorialspoint.com/images/trending_categories.svg" class = "sliderImage" alt = "Image 2">
      <img src = "https://www.tutorialspoint.com/images/Data-Structure.png" class = "sliderImage" alt = "Image 3">
      <img src = "https://www.tutorialspoint.com/images/Javascript.png" class = "sliderImage" alt = "Image 4">
   </div>
   <br> <br>
   <button type = "button" onclick = "startImageTrans()"> Start Image Transitions </button>
   <script>
      let images = document.querySelectorAll('.sliderImage');
      for (let i = 0; i < images.length; i++) {
         if (i != 0)
         images[i].style.display = "none";
      }
      var current = 0;
      function startImageTrans() {
         setInterval(fade, 3500);
      }
      function fade() {
         
         // hide the previous image with fading effect
         $("#slider img").eq(current).fadeOut(0);
         current++;
         current = current % images.length;
         
         // show a current image with fading effect
         $("#slider img").eq(current).fadeIn(2000);
      }
   </script>
</body>
</html>

使用 CSS 過渡屬性為圖片過渡添加淡入淡出效果

在這個方法中，我們將為 HTML 元素設定背景圖片。此外，我們將為 HTML 元素的背景添加淡入淡出過渡。所以，每當我們改變背景時，它就會出現淡入淡出的效果。

文法

使用者可以依照以下語法使用 CSS 過渡屬性為背景圖片添加淡入淡出效果。

<style>
#background-div {
   background-image: url("image_URL");
   transition: background 2s linear;
}
</style>
function FadeImage() {
   imageDiv.style.backgroundImage = `url(${allImages[current]})`;
}

我們使用上述語法中的 CSS 向元素添加了背景圖像，並「過渡」到背景。每當我們使用 JavaScript 更改背景圖像時，它都會自動將淡入淡出過渡應用於圖像。

範例

在下面的範例中，div 元素包含初始背景圖像。我們建立了包含不同背景圖像的 URL 的圖像陣列。我們使用 setInterval() 方法每 3000 毫秒呼叫 fadeInImage() 函數。

在 fadeInImage() 函數中，我們反覆更改背景圖像，當圖像更改時，會使用 CSS 進行淡入淡出過渡。

<html>
<head>
   <style>
      #background-div {
         background-position: center;
         background-size: cover;
         background-image:
         url("https://www.tutorialspoint.com/images/trending_categories.svg");
         display: flex;
         height: 300px;
         width: 600px;
         transition: background 2s linear;
      }
   </style>
</head>
<body>
   <h3 id="Using-the-i-CSS-transition-i-to-add-fadding-effect-in-image-transition">Using the <i> CSS transition </i> to add fadding effect in image transition</h3>
   <div id = "background-div"></div>
   <script>
      let allImages = [
         "https://www.tutorialspoint.com/images/trending_categories.svg",
         "https://www.tutorialspoint.com/javascript/images/javascript-minilogo.jpg",
         "https://www.tutorialspoint.com/css/images/css-mini-logo.jpg",
      ]
      const imageDiv = document.getElementById("background-div");
      setInterval(FadeImage, 3000);
      let current = 0;
      function FadeImage() {
         current++;
         if (current >= allImages.length) current = 0;
         imageDiv.style.backgroundImage = `url(${allImages[current]})`;
      }
   </script>
</body>
</html>

我們學習了三種為影像過渡添加淡入淡出效果的方法。我們在第二種方法中使用了 JQuery 的 fadeIn() 和 fadeout() 方法，在第一種和第三種方法中使用了 CSS 的「transition」屬性。

以上是使用 JavaScript 實現具有淡入淡出效果的圖像過渡的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。