使用 JavaScript 淡入图像
Anika Tabassum Era
2024年2月15日
JavaScript
JavaScript Image
如果没有 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';
}
输出：
使用 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);
}
输出：
%60-Method-to-Fade-In-Image.webp)
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
