10 秒后隐藏图像
[英]Hide image after 10 seconds
问题描述
Is there a way using HTML and CSS can I hide an image after 10 seconds?
有没有办法使用 HTML 和 CSS 可以在 10 秒后隐藏图像？ 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).如果不可能，是否有任何简单的方法可以仅使用 JavaScipt（不是 jQuery，除非非常需要，否则我不想将 jQuery 库添加到我的 HTML 页面）。
8 个解决方案
解决方案1
5 已采纳 2013-06-05 04:54:58
To hide instantly -立即隐藏-
setTimeout(function() {
document.getElementById('imageID').style.display='none'
}, 10*1000);
EDIT: - To animate hide using pure JS编辑： -使用纯 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();}
In the markup <image id="imageID" style="opacity:1"> remember to give style="opacity:1" inline css attribute.在标记<image id="imageID" style="opacity:1">记得给style="opacity:1"内联 css 属性。
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();请注意，由于<img>有一个alt属性，它可能会影响页面的搜索结果，并且执行display:none可能会对搜索结果产生不利影响，因此开发人员使用类似 - transform: translateX(); and just put the html tag out of the view say by giving a negative value in the translateX(value) .并通过在translateX(value)给出一个负值来将 html 标记从视图中说出来。
解决方案2
4 2013-06-05 04:47:29
Use setTimeOut() for this为此使用setTimeOut()
setTimeout() - executes a function, once, after waiting a specified number of milliseconds
setTimeout(function(){HIDE HERE)},10000);
解决方案3
3 2013-06-05 04:50:51
<script type = "text/javascript">
window.onload=function(){setTimeout(showPopup,10000)};
function showPopup()
{
//write functionality for the code here
}
</script>
Here , the method showPopup is called 10000 milliseconds or 10 seconds after the document has loaded.此处，在document加载后 10000 毫秒或 10 秒调用showPopup方法。
To achieve the fading out in pure JavaScript, the code becomes a bit more complicated.See edited answer below.This is not entirely my code but I don't remember from where I had got this.为了在纯 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>
解决方案4
2 2013-06-05 04:50:39
You can use css3 and @keyframes.您可以使用 css3 和 @keyframes。 Set the keyframe and make it transparent after however long you'd like.设置关键帧并在您想要的时间后使其透明。 Here is more info.这里有更多信息。 About Keyframes 关于关键帧
解决方案5
1 2013-06-05 05:18:27
You do not say anything about CSS2 or CSS3, but take a look at this... Maybe it can help you on the way?你没有说任何关于 CSS2 或 CSS3 的事情，但是看看这个...也许它可以帮助你？
解决方案6
0 2013-06-05 05:58:09
Try this试试这个
setTimeout(function() {
document.getElementById('//your image id').style.display='none'
}, 10000);
解决方案7
0 2018-07-04 06:56:03
I executed the following code with Python and Conda我用 Python 和 Conda 执行了以下代码
In Python, Output is displayed.在 Python 中，显示输出。
In Conda, Output is disappeared immediately, What to do?在Conda中，Output立即消失，怎么办？
threshold.临界点。
import numpy as np
import cv2
from matplotlib import pyplot as plt
Image operation using thresholding使用阈值的图像操作
img = cv2.imread('c4.jpg')
gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
ret, thresh = cv2.threshold(gray, 0, 255,
cv2.THRESH_BINARY_INV +
cv2.THRESH_OTSU)
cv2.imshow('image', thresh)
解决方案8
0 2020-01-03 06:35:11
Add these lines to your code , image will be displayed and if you press q then the ouput window will be closed将这些行添加到您的代码中，将显示图像，如果您按q则输出窗口将关闭
if cv2.waitKey(1) & 0xFF == ord('q'):
break
cap.release()
cv2.destroyAllWindows()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.