2

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

4

8 回答 8

5

立即隐藏——

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 属性。

请注意， as<img>有一个alt属性可能会影响页面的搜索结果，并且这样做display:none可能会对搜索结果产生不利影响，因此开发人员使用类似的东西 -transform: translateX();只需将 html 标记从视图中取出，例如在translateX(value).

于 2013-06-05T04:54:58.603 回答
4

用于setTimeOut() 此

setTimeout() - 在等待指定的毫秒数后执行一次函数

setTimeout(function(){HIDE HERE)},10000);
于 2013-06-05T04:47:29.547 回答
3 
<script type = "text/javascript">
window.onload=function(){setTimeout(showPopup,10000)};

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

在这里，该方法在加载showPopup 后的 10000 毫秒或 10 秒后调用。document

为了实现fading out纯 JavaScript，代码变得有点复杂。请参阅下面的编辑答案。这不完全是我的代码，但我不记得我从哪里得到的。

<!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-05T04:50:51.530 回答
2

您可以使用 css3 和 @keyframes。设置关键帧并在您想要的多长时间后使其透明。这里有更多信息。关于关键帧

于 2013-06-05T04:50:39.847 回答
1

你没有说任何关于 CSS2 或 CSS3 的内容，但是看看这个......也许它可以帮助你？

JsFiddle 上的演示

于 2013-06-05T05:18:27.000 回答
0

尝试这个

setTimeout(function() {
  document.getElementById('//your image id').style.display='none'
}, 10000);
于 2013-06-05T05:58:09.003 回答
0

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

在 Python 中，显示输出。

在 Conda 中，Output 立即消失，怎么办？

临界点。

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)
于 2018-07-04T06:56:03.117 回答
0

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

if cv2.waitKey(1) & 0xFF == ord('q'):
   break
cap.release()
cv2.destroyAllWindows()
于 2020-01-03T06:35:11.000 回答