10秒后隐藏图像

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

2013-06-05 Kerry

你不能得到什么实际？如何在10秒后做些什么或如何从DOM中删除节点？我敢肯定，这些任务都很容易googleable – zerkms

要隐藏瞬间 -

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

编辑： - 使用纯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="imageID" style="opacity:1">记得给style="opacity:1"内联CSS属性。

请注意，<img>有alt属性，它可能会影响页面的搜索结果，并做了display:none所以开发者使用这样的可能不利搜索结果的影响 - transform: translateX();，只是把HTML标记出来的观点被说在translateX(value)中给出负值。

来源

2013-06-05 04:54:58

有什么办法可以慢慢隐藏？因为它隐藏在闪光灯中。 – Kerry

PLZ查看编辑，这个工程没有'css3' –

加'toFixed' –

使用setTimeOut()这个

的setTimeout（） - 执行功能，有一次，等待指定的数毫秒

setTimeout(function(){HIDE HERE)},10000);

来源

2013-06-05 04:47:29 PSR

有没有办法缓慢隐藏图像？目前它被隐藏在闪存中。 – Kerry

它可能与jQuery – PSR

它可能没有jQuery – Ian

您可以使用CSS3和@keyframes后。设置关键帧并在无论多长时间后都使其透明。这是更多信息。 About Keyframes

来源

2013-06-05 04:50:39 ValleyDigital

我没有看到在这里使用css3关键帧 –

原来的问题是，如果他可以使用HTML和CSS，所以我给了一个可以与CSS3一起工作的答案。 setTimeout（）也可以工作，但其他人已经给出了答案。 – ValleyDigital

当然你是对的@DeveloperLooper，但我担心CSS3可能不支持IE和其他旧版本的浏览器。 – Kerry

<script type = "text/javascript"> 
window.onload=function(){setTimeout(showPopup,10000)}; 

function showPopup() 
{ 
    //write functionality for the code here 
} 
</script>

在此，该方法的document加载之后showPopup 称为10000毫秒或10秒。

要在纯JavaScript中实现fading out，代码会变得更复杂一点。请参阅下面的编辑答案。这不完全是我的代码，但我不记得我从哪里得到这个。

<!doctype html> 
<html> 
<head> 
<script type = "text/javascript"> 
var fading_div = document.getElementById('fading_div'); 
var animationComplete = true; 
window.onload=function(){setTimeout(hideImage,10000)}; 

function hideImage() 
{ 
    if (animationComplete && fading_div.style.opacity !== '0') { 
     animationComplete = false; 
     for (var i = 1; i <= 100; i++) { 
      setTimeout((function (x) { 
       return function() { 
        function_fade_out(x) 
       }; 
      })(100 - i), i * 10); 
     } 
    } 
} 

function function_opacity(opacity_value) 
{ 
    fading_div.style.opacity = opacity_value/100; 
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')'; 
} 

function function_fade_out(opacity_value) 
{ 
    function_opacity(opacity_value); 
    if (opacity_value == 1) { 
     fading_div.style.display = 'none'; 
     animationComplete = true; 
    } 
} 
</script> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<img id="fading_div" src="test_image.jpg"/> 
</body> 
</html>

来源

2013-06-05 04:50:51

你不说CSS2或CSS3什么，但看看这个...也许它可以帮助你的方式吗？

Demo on JsFiddle

来源

2013-06-05 05:18:27 Uffe

试试这个

setTimeout(function() { 
    document.getElementById('//your image id').style.display='none' 
}, 10000);

来源

2013-06-05 05:58:09 edd

10秒后隐藏图像

回答

相关问题