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秒後隱藏圖像

回答

相關問題