使用 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广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。