使用 JavaScript 淡入图像

Anika Tabassum Era 2024年2月15日

JavaScript JavaScript Image

使用 className 属性淡入图像
使用 requestAnimationFrame() 方法淡入图像

如果没有 JavaScript，可以使用 CSS 评估图像的淡入样式。但是这个过程并不可靠，因为我们无法动态处理它。

因此，JavaScript 使用方法 requestAnimationFrame() 而不是完全依赖 CSS 和 setTimeout() 方法的方式使路径更加快捷和迅速。在示例片段中，我们将看到一个代码实例，其中包括方法 requestAnimationFrame() 的实现以及可以在引用属性 className 的图像中淡入淡出的代码。

使用 `className` 属性淡入图像

我们将生成一个带有可行的 src 的 img 标签。存在可点击事件以启动图像的淡入。这里的主要工作是使用 className 属性，该属性将引用某个 CSS 块并将其与 img id 实例对齐。

代码 - HTML 文件：

<img id="img" style="width: 200px" src="https://images.unsplash.com/photo-1653450283266-c788c2ca4ab2?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872" alt="Image 1">
<br><br>
<button type="button" onclick="myFunction()">Change</button>

代码 - CSS 文件：

img {
            opacity: 0;
            filter: alpha(opacity=40);
    }
.animation {
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            opacity: 1;
        }

代码 - JavaScript 文件：

function myFunction() {
  document.getElementById('img').className = 'animation';
}

输出：

使用 className 属性淡入图像

使用 `requestAnimationFrame()` 方法淡入图像

在这方面，我们将有一个函数 fadeIn，它将采用 img 标签的实例。稍后，fadeIn 函数将对 requestAnimationFrame() 和 setTimeout() 进行操作，并根据当前浏览器详细信息定位时间范围。

代码 - HTML 文件：

<img id="what" src="https://images.unsplash.com/photo-1653372500616-ff0a2847f7ca?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" draggable="true" ondragstart="drag(event)" width="200" height="150">
<br><br>
<button onclick="myFunction()">Change</button>

代码 - CSS 文件：

img {
    opacity: 0;
    filter: alpha(opacity=40);
}

代码 - JavaScript 文件：

function fadeIn(el) {
  el.style.opacity = 0;
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.05;
    if (+el.style.opacity < 1) {
      var x = (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
          setTimeout(tick, 16)
    }
  };
  tick();
}

function myFunction() {
  var el = document.getElementById('what');
  console.log(el);
  fadeIn(el);
}

输出：

使用 requestAnimationFrame() 方法淡入图像

作者： Anika Tabassum Era

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

使用 className 属性淡入图像

使用 requestAnimationFrame() 方法淡入图像

相关文章 - JavaScript Image

使用 `className` 属性淡入图像

使用 `requestAnimationFrame()` 方法淡入图像