Схаваць здымак праз 10 секунд

Ці ёсць спосаб, з дапамогай HTML і CSS можна схаваць малюнак праз 10 секунд? Калі гэта не ўяўляецца магчымым, ці ёсць просты спосаб зрабіць гэта з дапамогай ўсяго Javascipt (не JQuery, я не хачу, каб дадаць бібліятэку jQuery ў маёй HTML-старонку, калі яе моцна не патрабуецца).

1
Што на самой справе вы не можаце атрымаць? Як зрабіць што-то праз 10 секунд ці як выдаліць вузел з DOM? Я ўпэўнены, што абедзве гэтыя задачы лёгка googleable
дададзена аўтар zerkms, крыніца

7 адказы

To hide instantly -

setTimeout(function() {
  document.getElementById('imageID').style.display='none'
}, 10*1000);

EDIT:- To animate hide using pure 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 remember to give style="opacity:1" inline CSS attribute.

Калі ласка, звярніце ўвагу, што мае Alt атрыбут, які можа паўплываць на вынікі пошуку на старонцы і рабіць Дысплей: не можа адмоўна адбіцца на вынікі пошуку, так што распрацоўшчыкі выкарыстоўваюць нешта накшталт - Transform: translateX (); і проста паставіць HTML тэг з пункту гледжання кажуць, даючы адмоўнае значэнне ў translateX (значэнне) ,

4
дададзена
@Kerry калі ласка, азнаёмцеся з апошняй праўкай
дададзена аўтар Ishank Dubey, крыніца
даданне toFixed
дададзена аўтар Ishank Dubey, крыніца
плз ўбачыць Edit, гэта працуе без CSS3
дададзена аўтар Ishank Dubey, крыніца
ці ёсць спосаб, каб павольна схаваць? як ён хаваецца ць успышцы.
дададзена аўтар Kerry, крыніца

Выкарыстоўвайце SetTimeout() для гэтага

<�Р> SetTimeout() - выконвае функцыю, калі, прачакаўшы ўказаны   колькасць мілісекунд </р>
setTimeout(function(){HIDE HERE)},10000);
3
дададзена
можна з JQuery
дададзена аўтар PSR, крыніца
@lan шкада, што я не ведаю, з-за JQuery
дададзена аўтар PSR, крыніца
Вы можаце выкарыстоўваць $ ( «# Ідэнтыфікатар») схаваць ( «павольна»). у кодзе
дададзена аўтар PSR, крыніца
@Kerry гэта нармальна для і ў цяперашні час
дададзена аўтар PSR, крыніца
@Ishank шкада, што я не ведаю
дададзена аўтар PSR, крыніца
Можна і без CSS3/JQuery/JS Lib гэта значыць чысты, выкарыстоўваючы чысты Javascript
дададзена аўтар Ishank Dubey, крыніца
можна без JQuery
дададзена аўтар Ian, крыніца
Можа гадоў, калі ласка, скажыце мне, як я магу зрабіць гэта з дапамогай JQuery?
дададзена аўтар Kerry, крыніца
Ці ёсць спосаб, каб павольна схаваць малюнак? У цяперашні час яго хаваючыся ць успышцы.
дададзена аўтар Kerry, крыніца
<script type = "text/javascript">
window.onload=function(){setTimeout(showPopup,10000)};

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

Тут, метад showPopup  называецца 10000 мілісекунд або 10 секунд пасля дакумент загружаны.

Для дасягнення вывядзення у чыстым JavaScript, код становіцца трохі больш complicated.See адрэдагавана below.This адказу не зусім мой код, але я не памятаю, адкуль я атрымаў гэта.

<!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>

</body>
</html>
3
дададзена

You can use css3 and @keyframes. Set the keyframe and make it transparent after however long you'd like. Here is more info. About Keyframes

2
дададзена
@Kerry зразумела. Удачы з праектам, хоць.
дададзена аўтар ValleyDigital, крыніца
арыгінальны пытанне было, калі б ён мог выкарыстаць HTML і CSS, таму я даў адказ, які мог бы працаваць з CSS3. SetTimeout() будзе працаваць таксама, але астатняя частка людзей ужо далі такі адказ.
дададзена аўтар ValleyDigital, крыніца
Я не бачу выкарыстанне CSS3 ключавых кадраў тут
дададзена аўтар Harsha Venkatram, крыніца
Вядома, вы маеце рацыю @DeveloperLooper, але я турбуюся CSS3 не можа падтрымліваць IE і іншыя старыя версіі браўзэраў.
дададзена аўтар Kerry, крыніца

Вы нічога пра CSS2 або CSS3 не гавораць, але зірніце на гэта ... Можа быць, гэта можа дапамагчы вам на шляху?

Demo на JsFiddle

1
дададзена

паспрабуйце гэта

setTimeout(function() {
  document.getElementById('//your image id').style.display='none'
}, 10000);
0
дададзена

Я выканаў наступны код з Python і Кондо

У Python, адлюстроўваецца выхад.

У Кондо, выхад адразу ж знік, што рабіць?

парог.

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)
0
дададзена