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();}

マークアップでは、インライン css 属性<image id="imageID" style="opacity:1">を忘れずに指定してください。style="opacity:1"

<img>as にはページの検索結果に影響を与える可能性のあるalt属性があり、 を実行するとdisplay:none検索結果に悪影響を与える可能性があるため、開発者は次のようなものを使用することに注意してtransform: translateX();くださいtranslateX(value)。

于 2013-06-05T04:54:58.603 に答える
3 
<script type = "text/javascript">
window.onload=function(){setTimeout(showPopup,10000)};

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

showPopup ここでは、 がロードされてから 10000 ミリ秒または 10 秒後にメソッドが呼び出さdocumentれます。

純粋な 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-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

I executed the following code with Python and Conda

In Python, Output is displayed.

In Conda, Output is disappeared immediately, What to do?

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)
于 2018-07-04T06:56:03.117 に答える