Question

我尝试在一个页面上显示内容有两个部分，因此第一个内容将以完整页面显示，而另一个内容将被隐藏，第一个内容将在2分钟后和2分钟后超时下面显示的内容的其他部分是我的代码的样本任何帮助将不胜感激。

<div id="top">
    *video will play in full screen on full page using javascript it will time out after 2 mininutes and it will hide the video and just show the the "Bottom" text *
    <iframe width="100%" height="100%" src="//www.youtube.com/embed/Lam6hufUt5k?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div id="bottom">*after 2 mins the text content will display on full page </div>

CSS

body {
width: 100% ;
height: 100% ;
margin: 0px ;}

Answer 1

解决方案100％无jquery工作:(你可以看到它在这里工作：http://jsfiddle.net/akmozo/ws24yd9j/）

当然，你应该记住，隐藏iframe 并不会停止播放视频如果它正在播放。这只是对你想要做的事情的一个简单回应，它有效，但你应该改善它做更好的事情。

HTML code：

<html><head>
<style>
    body{
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    #top {
        position:absolute;
        display: block;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
    #bottom {
        position:absolute;
        display: none;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        z-index: 9;
    }
</style>
<script>
    function load_timeout(){
        var timeout = setTimeout(function(){
            document.getElementById('top').style.display = 'none';
            document.getElementById('bottom').style.display = 'block';
        }, 2000*60);
    }
</script>
</head>
<body onload='load_timeout()'>
<div id='top'>
    <iframe width='100%' height='100%' src='http://www.youtube.com/embed/Lam6hufUt5k' frameborder='0' allowfullscreen></iframe>
</div>
<div id='bottom'>*after 2 mins the text content will display on full page </div>
</body>
</html>

Answer 2

使用javascript隐藏第一个并在2分钟（120秒）后显示第二个

<script>
    setTimeout(function() {
        document.getElementById("top").style.visibility = "hidden";
        document.getElementById("bottom").style.visibility = "initial";
    }, 1000*120);
</script>

如何在一个页面上拆分内容，而第一个页面首先显示，另一个页面隐藏？

2 个答案: