10秒后隐藏图像 [英] Hide image after 10 seconds

问题描述

有没有使用HTML和CSS的方法，我可以在10秒后隐藏图像吗？如果这是不可能的，是否有任何简单的方法只用JavaScipt来完成（不是jQuery，我不想将jQuery库添加到我的HTML页面，除非它非常需要）。

Is there a way using HTML and CSS can I hide an image after 10 seconds? If it's not possible, is there any easy way to do it with just JavaScipt (not jQuery, I don't want to add jQuery library to my HTML page unless its highly required).

推荐答案

要隐藏即刻 -

setTimeout(function() {
  document.getElementById('imageID').style.display='none'
}, 10*1000);

编辑： - （）函数start（）{

window.timerID = setInterval（function（）{

- To animate hide using pure JS

function start(){

window.timerID =  setInterval(function() {
var aOpaque = document.getElementById('imageID').style.opacity;
aOpaque = aOpaque-.1;

aOpaque = aOpaque.toFixed(1);   

document.getElementById('imageID').style.opacity = aOpaque;

if(document.getElementById('imageID').style.opacity<=0)
clearInterval(window.timerID);
},1000);
}

window.onload = function(){start();} 

在标记< image id =imageIDstyle =opacity：1> 记得给 style =不透明度：1\" 内联的CSS属性

In the markup <image id="imageID" style="opacity:1"> remember to give style="opacity:1" inline css attribute.

请注意，为< IMG> 有一个 alt 属性可能会影响页面的搜索结果，并且执行 display：none 可能会对搜索造成负面影响结果，所以开发人员使用类似于 - transform：translateX（）; 的方式，只需将html标签放在视图之外，方法是在 translateX（价值）。

Please note that as <img> has an alt attribute that might affect search results of the page and doing a display:none might adversely impact the search results so developers use something like - transform: translateX(); and just put the html tag out of the view say by giving a negative value in the translateX(value).

这篇关于10秒后隐藏图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！