要实现让一个img在页面加载后出现,并在一段时间后消失,可以通过以下步骤实现:
<img id="myImage" src="example.jpg" style="display: none;">
// 获取img元素
var img = document.getElementById("myImage");
// 页面加载完成后执行的函数
window.onload = function() {
// 显示img元素
img.style.display = "block";
// 设置定时器,在一段时间后隐藏img元素
setTimeout(function() {
img.style.display = "none";
}, 3000); // 3000毫秒即3秒钟后隐藏
};
在上述代码中,首先获取了id为"myImage"的img元素,然后在页面加载完成后执行的函数中将其显示出来。接着使用setTimeout函数设置了一个定时器,3秒钟后将img元素隐藏。
#myImage {
width: 200px;
height: 200px;
border: 1px solid black;
}
上述CSS代码设置了id为"myImage"的img元素的宽度为200px、高度为200px,并添加了一个黑色边框。
总结:通过上述步骤,可以实现在页面加载后使img元素出现,并在一段时间后消失。注意,页面加载完成后执行的函数可以确保在所有资源加载完毕后再显示img元素,避免出现加载过程中的闪烁现象。
领取专属 10元无门槛券
手把手带您无忧上云