阈值。

Question

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

Answer 1

将setTimeOut()用于此

setTimeout（） - 在等待指定后执行一次函数毫秒数

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

Answer 2

立即隐藏 -

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>的{{1}}属性可能会影响网页的搜索结果，因此执行alt可能会对搜索结果产生负面影响，因此开发人员会使用类似的结果 - {{只需在display:none中给出一个负值，然后将html标记放在视图之外。

Answer 3

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

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

此处，方法showPopup 在document加载后调用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>

Answer 4

您可以使用css3和@keyframes。设置关键帧并在您想要的时间之后使其透明。这是更多信息。 About Keyframes

Answer 5

你没有说CSS2或CSS3，但看看这个......也许它可以帮助你的路上？

Demo on JsFiddle

Answer 6

试试这个

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

Answer 7

我用Python和Conda执行了以下代码

在Python中，显示输出。

在Conda中，输出立即消失，该怎么办？

阈值。

import numpy as np
import cv2
from matplotlib import pyplot as plt

使用阈值进行图像操作

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)

Answer 8

将这些行添加到代码中，将显示图像，如果按 q ，则输出窗口将关闭

if cv2.waitKey(1) & 0xFF == ord('q'):
   break
cap.release()
cv2.destroyAllWindows()

10秒后隐藏图像

8 个答案:

阈值。

使用阈值进行图像操作